介绍 & lt; ! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01,过渡//EN"比;
& lt; html>
,& lt; head>
& lt;才能title> JS + DIV卷帘效果示例-F-BLOG
& lt;才能meta http-equiv=癈ontent-Type",内容=皌ext/html;, charset=UTF-8"比;
& lt;才能style 类型=拔谋?css"比;
盒子,,,#{溢出:隐藏;高度:25 px;边界:1 px solid # 666;宽度:300 px; background - color: # ccc;}
,,,p{填充:0 px;保证金:0 px;行高:25 px;}
,,,#以及接下来{溢出:隐藏;高度:30 px;边界:1 px solid # 666;宽度:400 px; background - color: # ff0000;}
,,,h5{填充:0 px;保证金:0 px;高度:30 px;行高:30 px;}
,,& lt;/style>
& lt;才能script 类型=拔谋?javascript"比;
,,,function reBox(支撑材、defaultHeight速度){
,,,,,var bheight=defaultHeight;
,,,,,var doScroll;
,,,,,var =0, b=0;
,,,,,var $=function (id) {
,,,,,,,return . getelementbyid (id);
,,,,,}
,,,,,var createBox=? lt; div id=& # 39;“+支撑材+“cbox& # 39;在“美元+ (Fid) .innerHTML +“& lt;/div>“;
,,,,,(Fid)美元.innerHTML=createBox;
,,,,,(Fid)美元.onclick=function () {
,,,,,,,如果(==0,和b==0) {
,,,,,,,,,b=1;
,,,,,,,,,doScroll=setInterval(函数(){
,,,,,,,,,,,如果(bheight<$(““+支撑材+“cbox") .offsetHeight) {
,,,,,,,,,,,,,var dist=Math.ceil(($(““+支撑材+“cbox") .offsetHeight-bheight)/10);
,,,,,,,,,,,,,bheight=bheight +经销;
,,,,,,,,,,,,,(Fid) .style.height=美元bheight +“px";
,,,,,,,,,,,其他}{
,,,,,,,,,,,,,clearInterval (doScroll);
,,,,,,,,,,,,,=1;
,,,,,,,,,,,,,b=0;
,,,,,,,,,,,}
,,,,,,,,,},速度);
,,,,,,,}
,,,,,,,如果(==1,和b==0) {
,,,,,,,,,b=1;
,,,,,,,,,doScroll=setInterval(函数(){
,,,,,,,,,,,如果(bheight> defaultHeight) {
,,,,,,,,,,,,,var dist=Math.ceil ((bheight-defaultHeight)/10);
,,,,,,,,,,,,,bheight=bheight-dist;
,,,,,,,,,,,,,(Fid) .style.height=美元bheight +“px";
,,,,,,,,,,,其他}{
,,,,,,,,,,,,,clearInterval (doScroll);
,,,,,,,,,,,,,=0;
,,,,,,,,,,,,,b=0;
,,,,,,,,,,,}
,,,,,,,,,},速度);
,,,,,,,}
,,,,,}
,,,}
,,,window=function () {
,,,,,reBox (“box" 25 30);
,,,,,reBox (“demo2"、30、10);
,,,}
& lt;/script>
,& lt;/head>
,& lt; body>
& lt;才能P>示例一:纵向,目标div:盒子,默认高度:25 px,速度:30毫秒,调用:reBox (“box" 25 30) & lt;/P>
& lt;才能div id=癰ox"比;
,,,& lt; p>高级网络程序员& lt;/p>
,,,& lt; p> 1了解HTTP协议,对Web程序性能优化有一定经验& lt;/p>
,,,& lt; p> 2、精通MySQL数据库,能熟练地运用SQL语言,有丰富的数据建模经验,,熟悉SQL语句调优和数据库调优& lt;/p>
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家介绍使用JavaScript和div怎么实现一个卷帘效果,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
1,实例代码:
