JS+DIV實現的卷簾效果示例

2019-11-19 17:05:08

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS+DIV實現的卷簾效果。分享給大家供大家參考，具體如下：

1、實例代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>  <title>JS+DIV卷簾效果示例-F-BLOG</title>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <style type="text/css">    #box{overflow:hidden;height:25px;border:1px solid #666;width:300px;background-color:#ccc;}    p{padding:0px;margin:0px;line-height:25px;}    #demo2{overflow:hidden;height:30px;border:1px solid #666;width:400px;background-color:#ff0000;}    h4{padding:0px;margin:0px;height:30px;line-height:30px;}   </style>  <script type="text/javascript">    function reBox(Fid,defaultHeight,speed){      var bheight=defaultHeight;      var doScroll;      var a=0,b=0;      var $=function(id){        return document.getElementById(id);      }      var createBox="<div id='"+Fid+"cbox'>"+$(Fid).innerHTML+"</div>";      $(Fid).innerHTML=createBox;      $(Fid).onclick=function(){        if(a==0&&b==0){          b=1;          doScroll=setInterval(function(){            if(bheight<$(""+Fid+"cbox").offsetHeight){              var dist=Math.ceil(($(""+Fid+"cbox").offsetHeight-bheight)/10);              bheight=bheight+dist;              $(Fid).style.height=bheight+"px";            }else{              clearInterval(doScroll);              a=1;              b=0;            }          },speed);        }        if(a==1&&b==0){          b=1;          doScroll=setInterval(function(){            if(bheight>defaultHeight){              var dist=Math.ceil((bheight-defaultHeight)/10);              bheight=bheight-dist;              $(Fid).style.height=bheight+"px";            }else{              clearInterval(doScroll);              a=0;              b=0;            }          },speed);        }      }    }    window.onload=function(){      reBox("box",25,30);      reBox("demo2",30,10);    }</script> </head> <body>  <P>示例一：縱向，目標div：box，默認高度：25px，速度：30毫秒，調用：reBox("box",25,30)</P>  <div id="box">    <p>高級Web程序員</p>    <p>1、了解HTTP協議，對Web程序性能優化有一定經驗</p>    <p>2、精通MySQL數據庫，能熟練地運用SQL語言，有豐富的數據建模經驗， 熟悉SQL語句調優和數據庫調優</p>    <p>3、熟練使用至少一種版本(CVS,SVN)控制工具</p>    <p>4、熟悉PHP語言及常見擴展（如mysql、pcre、xml等）</p>    <p>5、熟悉面向對象(OO)程序設計</p>  </div>  <P>示例二：縱向，目標div：demo2，默認高度：30px，速度：10毫秒，調用：reBox("demo",30,10)</P>  <div id="demo2">    <h4>數據挖掘工程師</h4>    <p>1、對海量數據分析、挖掘有濃厚興趣，沉穩厚重</p>    <p>2、熟悉PHP、JavaScript、HTML設計開發</p>    <p>3、了解HTTP協議，對程序性能優化有一定經驗</p>    <p>4、精通MySQL數據庫，能熟練地運用SQL語言</p>  </div>  <p>PS:從效果看，速度為10毫秒比較好</p>  <p>By：傅唯一 2009-1-26</p> </body></html>

2、運行效果圖如下：