JavaScript文本收缩展开 showdetail

原文发布时间为：2009-11-15 —— 来源于本人的百度文章 [由搬家工具导入]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div id="divS" style="border:1px solid #f0f0f0;background-color:#ccc;padding:4px;margin:10px">
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
测试
测试文本
测试了
测试侧试试了
测试文本
测试了
测试侧试试了
</div>

<script type="text/javascript"><!--
doShrink(document.getElementById('divS'),60);
function doShrink(oshrink,maxHeight){
 if(oshrink){
 var oH = (oshrink.clientHeight||oshrink.offsetHeight);
 if(oH>maxHeight){
 var linka = document.createElement("a");
 var div = document.createElement("div");
 div.innerHTML = "…… "
 text = document.createTextNode("[点击查看更多内容]");
 linka.href = "javascript:void(0)";
 linka.onclick = function(e) { shrinkShow(this); }
 linka.appendChild(text);
 div.appendChild(linka);
 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 remove(o){
if(o && o.parentNode)o.parentNode.removeChild(o);
}

/* 第一种，具有展开效果 */
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;
 }
 }
}

/* 第二种，没有展开效果 */

/*
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); //去除更多链接
}
*/

// --></script>

</body>
</html>