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

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

 

它是如何实现的呢，其实就是用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岁宝宝养育全书