• 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">
    <p>测试文本</p>
    <p>测试了</p>
    <p>测试侧试试了</p>
    <p>测试文本</p>
    <p>测试了</p>
    <p>测试侧试试了</p>
    <p>测试</p>
    <p>测试文本</p>
    <p>测试了</p>
    <p>测试侧试试了</p>
    <p>测试文本</p>
    <p>测试了</p>
    <p>测试侧试试了</p>
    </div>
    <p>
    <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 = "……<br />"
                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>
    </p>
    </body>
    </html>

  • 相关阅读:
    selenium webdriver 的环境搭建时注意事项
    python之文件处理
    python的if语句、while循环、for循环
    mysql从库Last_IO_Error: Got fatal error 1236 from master when reading data from binary log: 'Could not find first log file name in binary log index file'报错处理
    openstack之keystone部署
    网关协议
    HTTP协议
    Openstack keystone组件详解
    jboss服务启动失败报:Error occurred during initialization of VM
    python字典的常用操作
  • 原文地址:https://www.cnblogs.com/handboy/p/7158381.html
Copyright © 2020-2023  润新知