Dreamweaver教程 FrontPage教程 Flash教程 CSS教程
  • javascript教程
  • 当前位置:教程 > 网页制作 > javascript教程 > 正文

    JS实现滑动展开与折叠效果

    编辑:教程网 来源:网络 时间:2011年10月14日 16:44

    以下是引用片段:
    <script type="text/javascript">
    //Url: http://bbs.51js.com/thread-61646-1-1.html
    //Author: 风云突变
    //Modify: 枫岩
    var act;
    function over(s,nMax){
    var obj=document.getElementById(s);
    var h = parseInt(obj.offsetHeight);
    if (h < nMax){
    obj.style.height = (h + 2)+"px";
    clearTimeout(act);
    act = setTimeout("over('"+s+"',"+nMax+")", 10);
    }
    }
    function out(s,nMin){
    var obj=document.getElementById(s);
    var h = parseInt(obj.offsetHeight);
    if (h > nMin){
    obj.style.height = (h - 2)+"px";
    clearTimeout(act);
    act = setTimeout("out('"+s+"',"+nMin+")", 10);
    }
    }
    </script>
    <div id="mytd" onmouseover="over('mytd',200);" onmouseout="out('mytd',30);" style="background:#eee;">代码实例:层的滑动展开/折叠</div>


    无忧网友 fangxiao9159 再次优化后:
    以下是引用片段:
    <script type="text/javascript">
    var intervalId = null;
    function move(id,state){
    var obj = document.getElementById(id);
    if(intervalId != null)
    window.clearInterval(intervalId);
    function change(){
    var h = parseInt(obj.offsetHeight);
    obj.style.height = (state == "down") ? (h + 2) : (h - 2);
    }
    intervalId = window.setInterval(change,10);
    }
    </script>
    <table border="1" cellpadding="0" cellspacing="0" id="mytd" onmouseover="move('mytd','down');" onmouseout="move('mytd','out');">
    <tr><td>无忧脚本 - 风云突变</td></tr></table>


  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/javascript/27851.html

  • 上一篇:JavaScript极速狂飙:CSS样式表的背景渲染效率
  • 下一篇:网页设计:下拉菜单的制作