html鼠标滑过卷帘,JS+DIV实现的卷帘效果示例

本文实例讲述了JS+DIV实现的卷帘效果。分享给大家供大家参考，具体如下：

1、实例代码：

JS+DIV卷帘效果示例-F-BLOG

#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;}

function reBox(Fid,defaultHeight,speed){

var bheight=defaultHeight;

var doScroll;

var a=0,b=0;

var $=function(id){

return document.getElementById(id);

}

var createBox="

"+$(Fid).innerHTML+"

";

$(Fid).innerHTML=createBox;

$(Fid).οnclick=function(){

if(a==0&&b==0){

b=1;

doScroll=setInterval(function(){

if(bheight

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.οnlοad=function(){

reBox("box",25,30);

reBox("demo2",30,10);

}

示例一：纵向，目标div：box，默认高度：25px，速度：30毫秒，调用：reBox("box",25,30)

高级Web程序员

1、了解HTTP协议，对Web程序性能优化有一定经验

2、精通MySQL数据库，能熟练地运用SQL语言，有丰富的数据建模经验， 熟悉SQL语句调优和数据库调优

3、熟练使用至少一种版本(CVS,SVN)控制工具

4、熟悉PHP语言及常见扩展(如mysql、pcre、xml等)

5、熟悉面向对象(OO)程序设计

示例二：纵向，目标div：demo2，默认高度：30px，速度：10毫秒，调用：reBox("demo",30,10)

数据挖掘工程师

1、对海量数据分析、挖掘有浓厚兴趣，沉稳厚重

2、熟悉PHP、JavaScript、HTML设计开发

3、了解HTTP协议，对程序性能优化有一定经验

4、精通MySQL数据库，能熟练地运用SQL语言

PS:从效果看，速度为10毫秒比较好

By：傅唯一 2009-1-26

2、运行效果图如下：

希望本文所述对大家JavaScript程序设计有所帮助。