带缓冲显示和收缩的隐藏层效果

发表时间：2010-04-02关注度：510 views 评论数：0

缓冲效果+伸缩隐藏层 js写的可以上下慢慢的缓冲的效果来显示隐藏层，其实这个用jquery来做的话更简单。O(∩_∩)O~ [runcode height="300"] 缓冲伸缩层 var op=0,oP=0 function f_s(id,_h){ if (op==1){ clearTimeout(timer); op=0; return } if (oP==1)return var obj=document.getElementById(id); obj.style.display="block"; obj....

缓冲效果+伸缩隐藏层
js写的可以上下慢慢的缓冲的效果来显示隐藏层，其实这个用jquery来做的话更简单。O(∩_∩)O~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>缓冲伸缩层</title> <script> var op=0,oP=0 function f_s(id,_h){ if (op==1){ clearTimeout(timer); op=0; return } if (oP==1)return var obj=document.getElementById(id); obj.style.display="block"; obj.style.height="1px"; var changeW=function(){ oP=1; var obj_h=parseInt(obj.style.height); if(obj_h<_h){ obj.style.height=(obj_h+Math.ceil((_h-obj_h)/10))+"px"; setTimeout(changeW,1) } else{ oP=0; } } changeW() } var bw function c_W(id){ if (oP==1)return op=0; var obj=document.getElementById(id); var closeDiv=function(){ oP=1; var obj_h=parseInt(obj.style.height); if(obj_h>1){ obj.style.height=(obj_h-Math.ceil(obj_h)/5)+"px"; setTimeout(closeDiv,1) } else{ oP=0; obj.style.display="none"; } } closeDiv() } var timer function closeW(id){ clearTimeout(timer); timer=setTimeout(function(){c_W(id)},100) var obj=document.getElementById(id); obj.onmouseover=function(){clearTimeout(timer);this.style.height=240+"px"} obj.onmouseout=function(){op=1;timer=setTimeout(function(){c_W(id)},100)} } </script> </head> <body> <div onmouseover="f_s('div1',240)" onmouseout="closeW('div1')" style=" position:absolute;background:black; left: 579px; top: 34px; width: 149px; height: 35px;color:#FFF;">时代前端</div> <div id="div1" style="position:absolute; background:aqua; left: 451px; top: 73px; width: 349px; height: 335px; display:none;padding:10px;font-size:12px;line-height:24px;overflow:hidden"> <a href=###>缓冲伸缩层</a><br> <a href=###>缓冲伸缩层</a><br> <a href=###>缓冲伸缩层</a><br> <a href=###>缓冲伸缩层</a><br> </div> <p></p> <div style="margin-bottom:10px;">由时代前端收集整理 <a href=http://www.52shidai.com _fcksavedurl="http://www.52shidai.com" _fcksavedurl="http://www.52shidai.com">http://www.52shidai.com/ 时代前端</a></div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明文章转载自：网站前端,web前端,前端脚本,前端优化|时代前端 [http://www.52shidai.com]
本文链接地址：带缓冲显示和收缩的隐藏层效果

标签：缓冲, 隐藏层

上一篇: 给链接加上漂亮的对话框式提示效果

下一篇:163网易的Tab滑动选项卡-可重复

随机日志推荐

发表评论

最热文章
- 100个最漂亮|免费的wordpress模板 - 3,072 views
- 漂亮的javascript对话框(弹出层)组件[附源码] - 2,272 views
- wordpress采集插件—wp-o-matic使用详解 - 1,981 views
- 开启wordpress 3.0多用户的方法 - 1,781 views
- 12个用jQuery插件改变Button按钮的漂亮特效 - 1,765 views
- 国人原创的WordPress杂志主题wp-cms - 1,650 views
- jQuery-bind不能处理绑定hover事件 - 1,615 views
- 封装好的javascript图片滑动效果 - 1,571 views
- 推荐5个漂亮的jquery主流图表插件 - 1,557 views
- 文字向上不间断滚动代码-兼容各浏览器 - 1,362 views
最新文章
热门标签

canvas google html HTML5 JavaScript jQuery SEO wordpress 主题优化关键字兼容函数前端优化博客友情链接图片外链工具常用性能技巧排名推广插件搜索搜索引擎收录教程文章方法时间权重模板滚动漂亮特性百度经典网站菜单谷歌遍历链接鼠标滚轮

网站前端,web前端,前端脚本,前端优化|时代前端