DIV卷帘效果示例

最新推荐文章于 2023-07-13 14:10:41 发布

原创最新推荐文章于 2023-07-13 14:10:41 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #性能优化 #html #数据库 #mysql

Javascript 专栏收录该内容

5 篇文章

订阅专栏

这是一个HTML页面，展示了如何使用JavaScript实现DIV元素的卷帘效果。通过`reBox`函数，实现了两个示例：`box`和`demo2`，分别具有不同的默认高度和滚动速度。点击DIV会触发卷帘动画，实现内容的展开和收起，适用于创建交互式的网页元素。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>DIV卷帘效果示例-F-BLOG</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #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> <mce:script type="text/javascript"></mce: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>