Js+Div 层展开与层收起的一个例子

  • 又一个用JS控件DIV层的展开与折叠的功能,还带有点动画效果,可以用到一些软件介绍、明星介绍之类的,当点击详细查看的时候会全部显示出来,优酷网有这种类似效果,其实用起来很简单,不懂JS想念你也能搞定!
  • <html>
    <head>
    <title>可展开的一个DIV区域</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <style>
    #content,#intro,{
    font: 13px/25px;
    200px;
    height: 40px;
    background: #eee;
    padding: 10px;
    border: 4px #ccc double;
    border-bottom:0;
    overflow: hidden;
    }

    #intro, {
    color: #036;
    font:12px;
            border: 4px #ccc double;
            border-top:0;
            height:70px;
    }
    #key{color:#900;float:right}
    hr{height:1px;border:1px #ccc dotted}
    </style>
    </head>
    <body>
    <script>
    var s=50;
    var minheight=70;
    var maxheight=445;
    function shoppingcat(){
    var key = document.getElementById("key").innerText;
    if(key=="展开"){
       content.style.pixelHeight+=s;
       if(content.style.pixelHeight<maxheight){
        setTimeout("shoppingcat();",1);
       }else{
        document.getElementById("key").innerText="关闭";
       }
    }else{
       content.style.pixelHeight-=s;
       if(content.style.pixelHeight>minheight){
        setTimeout("shoppingcat();",1);
       }else{
        document.getElementById("key").innerText="展开";
       }
    }
    }
    </script>
    <div id="content">
    一个站长:
    <br><br>
    当夜孤独的时候,<br>
    还可以抱着你。<br>
    那该有多幸福……<br>
    一个适应寂寞的人,<br>
    只要有你陪着我,<br>
    忽略心中那美丽的温存……<br>
    当我寂寞的时候还可以想着你……<br><br>
    我想说:<br>
    我是多么多么的爱你……<br>
    而你去什么也没感受到……<br>
    </div>
    <div id="intro"><hr>作者:乱言<span id="key" onclick="shoppingcat();">展开</span></div>
    </body>
    </html>

    原文地址:https://www.cnblogs.com/cnlmjer/p/4099863.html