在需要的时候用js收缩文本高度
在显示图书目录的时候,往往拉的页面很长,用户一眼看不到边,这样用户体验不好,所以经常可以看看“继续阅读”的链接。
它是如何实现的呢,其实就是用js检测块的高度,如果高度超过一定数,则修改文本块的高度,并设置overflow:hidden,然后再创建一个继续阅读的连接放在下面用来展开所有内容。
js代码如下,代码在ie和firefox下测试通过:
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
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("[点击查看更多内容
![](https://images.cnblogs.com/dot.gif)
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);
}
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
测试
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
如上面的测试代码效果
在这个地址你可以看到更形象的测试效果图