`

在需要的时候用javascript收缩文本高度，并渐进展开

JavaScript生活游戏IEFirefox 
阅读更多

在显示图书目录的时候，往往拉的页面很长，用户一眼看不到边，这样用户体验不好，所以经常可以看看“继续阅读”的链接。

 

它是如何实现的呢，其实就是用js检测块的高度，如果高度超过一定数，则修改文本块的高度，并设置overflow:hidden，然后再创建一个继续阅读的连接放在下面用来展开所有内容。

 

js代码如下，代码在ie和firefox下测试通过：

function doShrink(oshrink,maxHeight){
    if(oshrink){
        var oH = (oshrink.clientHeight||oshrink.offsetHeight);
        if(oH>maxHeight){
            var link = document.createElement("a");
            var div = document.createElement("div");
            div.className = "smallA";
            div.innerHTML = "…………<br />"
            text = document.createTextNode("[点击查看更多内容]");
            link.href = "javascript:void(0)";
            link.onclick = function(e) { shrinkShow(this); }
            link.appendChild(text);
            div.appendChild(link);
            var onext = oshrink.nextSibling;
            if(onext)
                oshrink.parentNode.insertBefore(div,onext);
            else
                oshrink.parentNode.appendChild(div);
            //过滤较长的内容
            oshrink.srcHeight = oH;
            oshrink.style.cssText ="overflow-y: hidden; max-height: "+maxHeight+"px; *_height: "+maxHeight+"px; ";
        }
    }
}
function shrinkShow(obj) {
    var omore = obj.parentNode;
    var ohide = omore.previousSibling;
    ohide.style.height  = ohide.srcHeight + 'px';
    ohide.style.maxHeight  = ohide.srcHeight + 'px';
    remove(omore);
}

 

在这个地址你可以看到形象的测试效果图

 

--------------------

下面内容为4月27日新添加内容

--------------------

评论中有朋友提出逐步放开被隐藏内容的高度，下面是我的实现代码，doShrink函数不变：

var shrinkInterval = false;
function shrinkShow(obj) {
	var omore = obj.parentNode;
	var ohide = omore.previousSibling;
    shrinkInterval = window.setInterval(function(){shrinkStep(ohide);},20);
	remove(omore);
}

function shrinkStep(ohide){
    var targetHeight = ohide.srcHeight;
    var nowHeight = (ohide.clientHeight||ohide.offsetHeight);;
    if(nowHeight < targetHeight){
        ohide.style.height  = nowHeight+20 + 'px';
	    ohide.style.maxHeight  = nowHeight+20 + 'px';
    }else{
        if(shrinkInterval){
            window.clearInterval(shrinkInterval);
            shrinkInterval = false;
        }
    }
}

 

逐步打开的效果，请看这里：0-1岁宝宝养育全书

6
顶
0
踩
分享到：
| 生活需要精打细算，在线买书要比价,当当卓 ...
评论
8 楼 yukaizhao 2009-05-04  
tutu1982 写道

如果你伸缩的内容下面还有其它内容你怎么处理呢

下面有内容不是问题，在收缩的时候下面的内容上提，在展开的时候下面的内容向下扩展，请看下面的例子：
http://www.baobaoyunli.com/books/0/0_1suibaobaoyangyuquanshu_51.aspx
7 楼 tutu1982 2009-04-30  
如果你伸缩的内容下面还有其它内容你怎么处理呢
6 楼 yukaizhao 2009-04-27  
实现了一下逐步展开，并添加到了原文中。
5 楼 yukaizhao 2009-04-27  
可以把原本的高度作为一个属性放到div对象中，然后在扩展的时候用setInterval逐步增加高度就可以了。
4 楼 energykey 2009-04-24   
else
{
stopCreate();
[color=red][b]obj.style.height="auto";[/b][/color]
}


我加了一句这个，呵呵，居然出现了神奇的效果哦~
这个应该是属于博主的山寨版实现了哦！！！比较容易理解的哇咔咔
3 楼 energykey 2009-04-24   
<html>
<head>
<link href="home.css" rel="stylesheet" type="text/css" media="screen, projection" charset="utf-8" />
</head>
<body>
<div id="menu" style="clear:both;height:20%;overflow: hidden;">
<br>孕期保健——我要做妈妈了
<br>第一篇 孕前的准备
<br>1、什么时候当妈妈好
<br>2、怎样调适孕前生活节律
<br>3、孕前营养储备有哪些
<br>4、哪个季节适于怀孕
<br>5、怎样选择受孕时机
<br>6、哪些情况下不宜怀孕
<br>7、什么样的夫妻不宜生育
<br>8、多次人工流产会产生哪些不良后果
第二篇 怀孕早期
<br>9、怀孕的征兆有哪些
<br>10、怎样推算宝宝的生日
<br>11、孕早期胎儿有什么特点
<br>12、为什么说产前检查很有必要
<br>13、孕早期要做哪些检查
<br>14、孕早期的日常生活要注意什么
<br>15、孕早期可以做哪些运动
<br>16、怎样保证孕早期的营养
<br>17、为什么要补充叶酸
<br>18、为什么孕期补充铁剂很重要
<br>19、呕吐得特点厉害怎么办
<br>20、电脑对孕妇有影响吗
<br>21、孕妇能做放射线检查吗
<br>22、什么是TORCH感染
<br>23、孕期可用哪些疫苗
<br>24、孕妇用药要注意什么
<br>25、妊娠期的安全用药包括哪些
<br>26、对胎儿有不良影响的药物有哪些
<br>27、有哪些中药不宜在孕期服用
<br>28、妈妈吸烟喝酒对胎儿有哪些不良影响
<br>29、孕妇的饮品有什么限制
<br>30、孕期为什么要避免噪音污染
<br>31、孕期夫妻性生活还能继续吗
<br>32、孕早期的性生活要注意什么
<br>33、孕早期阴道出血的常见原因有哪些
第三篇 怀孕中期
第四篇 怀孕晚期
第五篇 临产和分娩
孕期饮食——为宝宝吃好每一餐
产后保健——妈妈开心坐月子
母乳喂养——让宝宝更健康
婴幼儿护理——关注宝宝每一天
婴幼儿常见病——愿宝宝健康成长
亲子儿歌百首
亲子故事百篇
亲子游戏百种
</div>
<div id="showMore">
<a href="javascript:showMore();">点击查看更多</a>
</div>
<script type="text/javascript">

function showMore(){
var menu=document.getElementById("menu");
//alert(menu.style.height);
//alert(eval(menu.style.height*100+10)+"%");
//menu.style.height=eval(menu.style.height*100+10)+"%";
startCreate();
}

var heightTimer=null;
var count=20;
function startCreate(){
var obj=document.getElementById("menu");
var maxheight=1000;

if(count<100)
{
obj.style.height=count+"%";
count=eval(count+1);
}
else
{
stopCreate();
}

heightTimer=setTimeout("startCreate()",10);
}

function stopCreate(){
clearTimeout(heightTimer);
document.getElementById("showMore").style.display="none";
}

</script>

</body>

</html>


我像这样控制实现了渐变效果，但这里的100%好像是页面的百分之百，能不能帮我优化一下？我对Js不怎么在行，呵呵，，，你的Js里那些属性我从来没有用到过哦。。。
2 楼 yukaizhao 2009-04-24  
谢谢建议。
1 楼 energykey 2009-04-24  
以前用自定义标签通过限制字数实现控制高度的，呵呵。不过作用和这个有一些差别，，，这个展开的时候建议做一个渐变效果，现在这样一下闪出来了，眼睛都看懵了。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用javascript做的文本编辑器

    根据提供的信息，我们可以总结出以下有关使用JavaScript创建文本编辑器的知识点： ### 一、文本编辑器概述 在现代Web开发中，文本编辑器是非常重要的工具之一，它可以帮助用户更直观地编辑和格式化文本内容。通过...

    jQ 展开收缩效果

    为了增加用户体验，我们还可以在展开收缩过程中添加过渡动画，如淡入淡出效果。这可以通过`fadeToggle()`方法实现： ```javascript $("#toggleButton").click(function() { $("#contentArea").fadeToggle("slow");...

    zTree树形菜单展开收缩插件

    在本项目中，"zTree树形菜单展开收缩插件"是其核心应用，主要特性包括节点的动态展开与收缩，以及支持关键字模糊查询筛选功能。 1. **zTree基本概念** - **树形结构**：zTree展示的数据结构为树状，每一级节点可以...

    JavaScript 富文本框

    在网页设计中，使用JavaScript实现富文本框可以极大地提升用户体验，让交互变得更加直观和便捷。 实现JavaScript富文本框主要涉及以下几个知识点： 1. **DOM操作**：JavaScript通过Document Object Model（DOM）与...

    javascript 多层嵌套的一个层展开、收缩实例

    在JavaScript编程中，多层嵌套的展开与收缩是一个常见的需求，特别是在构建可交互的用户界面，如树形结构、折叠菜单或者层级数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，以及相关的技术要点。 首先...

    javascript获取选中文本

    javascript获取选中文本的测试脚本，选中文本时产生一个按钮，点击按钮显示文本内容

    jQuery展开收缩效果

    可以预先设定两个图标，然后在展开和收缩时通过修改元素的`class`来切换： ```javascript $("#toggleBtn").click(function() { var $icon = $(this).find("i"); if ($icon.hasClass("fa-angle-down")) { $icon....

    c#导航弹性收缩展开菜单

    "c#导航弹性收缩展开菜单"是一个项目，旨在创建一个具有动态效果的PC端导航菜单，它使用JavaScript (js) 和jQuery (jq) 进行前端实现，以提供用户友好的交互体验。 在C#中，虽然主要处理后端逻辑，但也可以通过ASP...

    javascript富文本框

    通常，富文本框会用一个不可见的`&lt;iframe&gt;`或`&lt;div&gt;`来承载文本内容，利用CSS和JavaScript模拟文本编辑器的界面，并提供事件处理和API接口，使得开发者可以控制用户的输入行为。 ### 二、富文本框库 1. **CKEditor...

    javascript层收缩效果

    标题中的“javascript层收缩效果”指的是使用JavaScript实现的网页元素（通常称为“层”或“div”）在用户交互下进行尺寸变化的效果。这种效果常见于菜单、侧边栏、弹窗等，使得页面布局更加动态和交互友好。在网页...

    javascript 日期数字文本格式化

    在JavaScript中，日期和数字的文本格式化是一个常见的需求，特别是在构建用户界面或者处理数据时。这个主题主要涉及如何将日期对象转换为易读的字符串，以及如何对数字进行格式化，使其符合特定的显示标准。这篇博文...

    javascript 做的 树形展开控件

    在构建这个树形控件时，我们可以使用JavaScript对象表示树的节点，每个节点包含自身的文本、子节点数组以及状态（如是否展开）。当用户点击节点时，对应的事件处理器会检查节点的状态并动态地添加或删除子节点的DOM...

    侧边展开收缩菜单结构清晰

    在IT界，尤其是在网页设计和开发中，"侧边展开收缩菜单"是一种常见的交互元素，它为用户提供了方便的导航体验。这种设计模式通常应用于网站和应用的头部或侧边栏，允许用户根据需要展开或收起菜单，以节省屏幕空间，...

    rails-javascript-integrations, JavaScript重 Rails 应用的渐进集成策略.zip

    rails-javascript-integrations, JavaScript重 Rails 应用的渐进集成策略 Rails JavaScript集成策略注意：这比最后一个提交日期更新更新，因为大多数有趣的工作不在 master 分支上。为什么？模块化视图使用户界面的...

    循序渐进的javascript范例资料

    总的来说，这份“循序渐进的JavaScript范例资料”涵盖了JavaScript从基础到进阶的各个方面，通过实例学习，你将能够深入理解并熟练运用这门语言，从而在Web开发领域游刃有余。无论你是刚接触JavaScript的新手，还是...

    JavaScript编程循序渐进_演示代码

    JavaScript是一种广泛应用...通过"JavaScript编程循序渐进_演示代码"，你可以深入理解这些概念，并通过实际代码练习提高技能。记住，实践是掌握任何编程语言的关键，所以尝试运行和修改示例，以更好地理解其工作原理。

    html5手机端动画展开收缩导航菜单特效.zip

    可能使用了CSS3的过渡（transition）和动画（animation）属性来实现平滑的展开和收缩效果。同时，CSS还可能使用媒体查询（media queries）来确保菜单在不同屏幕尺寸下的响应式布局。 压缩包中的"js"文件夹可能包含...

    JavaScript写的文本编辑器

    JavaScript编写的文本编辑器是一种常见的前端技术应用，用于在网页上提供类似Microsoft Word的文本处理功能。这种编辑器允许用户直接在浏览器中进行文本输入、格式化、插入图片、链接等操作，极大地丰富了Web页面的...

    div做展开收缩内容效果

    在实际应用中，还可以添加更复杂的逻辑，比如设置计时器自动收起、记忆用户上次的选择状态，或者在展开收缩过程中加载更多数据等。同时，要注意响应式设计，确保在不同设备和屏幕尺寸上都能良好地工作。 总之，利用...

    VueJS API文档 Vue是一套用于构建用户界面的渐进式JavaScript框架

    Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。Vue.js是...

Magicbox
Global site tag (gtag.js) - Google Analytics