JS DIV实现的卷帘效果示例

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

1、实例代码：

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' HTML标题js DIV卷帘效果示例-F-BLOG/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' style type=' text/CSS ' # box { overflow :隐藏；高度：25pxborder:1px固体# 666;宽度宽度：300像素背景色： # CCC} p { padd :0 pxmargin :0 px线高：25 px} # demo2 { overflow:hidden高度：30 pxborder:1px固体# 666;宽度宽度：400像素背景-颜色： # ff 0000} H4 { padd :0 pxmargin :0 px高度：30 px线高：30 px}/样式脚本类型='text/javascript '函数reBox(Fid，默认高度，速度){ var BH八字=defaultHeightvar doScrollvar a=0，b=0；var $=function(id){返回文档。getelementbyid(id)；} var CreateBox=' div id=' Fid ' cbox ' ' $(Fid).innerHTML '/div '；$(Fid).innerHTML=createBox$(Fid).onclick=function(){ if(a==0b==0){ b=1；doscoll=SetInterval(function(){ if(BH three $(' Fid ' cbox ')).offset theight){ var dist=math。天花板($(“Fid ' cbox”).偏移ThEight-BH h8)/10)；钅波八字=八字距离；$(Fid)。风格。高度=BH三' px '；} else { clearInterval(DocRoll)；a=1；b=0；} },速度);} if(a==1b==0){ b=1；doscoll=set interval(function(){ if(BH threaddefaultheight){ var dist=math。天花板((BH螺纹-默认高度)/10)；钅波八字=八字-区；$(Fid)。风格。高度=BH三' px '；} else { clearInterval(DocRoll)；a=0；b=0；} },速度);} } }窗口。onload=function(){ reBox(' box '，25，30)；reBox('demo2 '，30，10)；}/脚本/头体P示例一：纵向，目标div:box，默认高度：25px，速度：30毫秒，调用：reBox('box '，25，30)/P div id='box' p高级网程序员/p p1、了解超文本传送协议协议，对网程序性能优化有一定经验/p p2、精通关系型数据库数据库，能熟练地运用结构化查询语言语言，有丰富的数据建模经验，熟悉结构化查询语言语句调优和数据库调优/p p3，1 .熟练使用至少一种版本(SVN简历)控制工具/p p4、熟悉服务器端编程语言(专业超文本预处理器的缩写)语言及常见扩展（如mysql、pcre、xml等)/p p5，熟悉面向对象(OO)程序设计/p /div P示例二：纵向，目标div:demo2，默认高度：30px，速度：10毫秒，调用：reBox('demo '，30，10)/P div id='demo2' h4数据挖掘工程师/h4 p1、对海量数据分析、挖掘有浓厚兴趣，沉稳厚重/p p2、熟悉PHP、JavaScript、HTML设计开发/p p3，1 .了解超文本传送协议协议，对程序性能优化有一定经验/p p4、精通关系型数据库数据库，能熟练地运用结构化查询语言语言/p/div PPS 3360从效果看，速度为10毫秒比较好/p pBy:傅唯一2009-1-26/p /body/html2、运行效果图如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript切换特效与技巧总结》 、 《JavaScript查找算法技巧总结》 、 《JavaScript动画特效与技巧汇总》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。