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

yukaizhao

浏览: 240070 次
性别:
来自: 北京

最近访客更多访客>>

qq849397558

ut7gs1x5

z2042489

Epyon_36959

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript 生活游戏 IE Firefox

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

它是如何实现的呢，其实就是用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
踩

分享到：

猪流感全面解析 | 生活需要精打细算，在线买书要比价,当当卓 ...

2009-04-24 10:59
浏览 2879
评论(8)
分类:Web前端
查看更多

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

以前用自定义标签通过限制字数实现控制高度的，呵呵。不过作用和这个有一些差别，，，这个展开的时候建议做一个渐变效果，现在这样一下闪出来了，眼睛都看懵了。

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论