JS实现网页右侧带动画效果的伸缩窗口代码
本文实例讲述了JS实现网页右侧带动画效果的伸缩窗口代码。分享给大家供大家参考，具体如下：
这是一款带缓冲效果的网页右侧固定伸缩窗口，点击带颜色的区域，浮动的层窗口就会伸缩出来，再次点击则缩进去。无jQuery，完全JavaScript实现的效果。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-right-dh-dlg-style-codes/
具体代码如下：
<!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> <title>带缓冲效果的网页右侧固定伸缩窗口</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #common_box{width:300px;position:fixed;_position:absolute;right:0;top:40%;border:1px solid #789;background:#fff;z-index:88} #cli_on{width:30px;height:180px;float:left;cursor:pointer;background:#ac8932;text-align:center;line-height:180px} </style> </head> <body> <div style="width:100%;height:1024px;background:#789"></div> <div id="common_box"> <div id="cli_on">+</div> <div> 这里放置菜单内容 </div> </div> <script type="text/javascript"> window.onload = function() { var combox = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var flag = true, timer = null, initime = null, r_len = 0; cli_on.onclick = function () { /*如果不需要动态效果，这两句足矣 combox.style.right = flag?'-270px':0; flag = !flag; */ clearTimeout(initime); //根据状态flag执开展开收缩 if (flag) { r_len = 0; timer = setInterval(slideright, 10); } else { r_len = -270; timer = setInterval(slideleft, 10); } } //展开 function slideright() { if (r_len <= -270) { clearInterval(timer); flag = !flag; return false; } else { r_len -= 5; combox.style.right = r_len + 'px'; } } //收缩 function slideleft() { if (r_len >= 0) { clearInterval(timer); flag = !flag; return false; } else { r_len += 5; combox.style.right = r_len + 'px'; } } //加载后3秒页面自动收缩 initime = setTimeout("cli_on.click()", 3000); } </script> </body> </html>
希望本文所述对大家JavaScript程序设计有所帮助。
-
本文向大家介绍JS实现网页烟花动画效果，包括了JS实现网页烟花动画效果的使用技巧和注意事项，需要的朋友参考一下 原生js实现放烟花效果，点击鼠标，然后向四周扩散，最后自由落体效果！最简单的方法实现！ 效果图： CSS代码： js代码： 更多JavaScript精彩特效分享给大家： Javascript菜单特效大全 javascript仿QQ特效汇总 JavaScript时钟特效汇总 以上就是本文的
-
本文向大家介绍javascript实现右侧弹出“分享到”窗口效果，包括了javascript实现右侧弹出“分享到”窗口效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲解了javascript实现右侧弹出“分享到”窗口的详细代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 以上就是本文的全部内容，希望对大家的学习有所帮助。
-
本文向大家介绍JS实现slide文字框缩放伸展效果代码，包括了JS实现slide文字框缩放伸展效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现slide文字框缩放伸展效果代码。分享给大家供大家参考，具体如下： 这里介绍的slide文字框缩放伸展效果，自己闲来无事写的，不是太好，可能在兼容性方面还需努力，展开速度方面，IE8和火狐的展开速度不一样，火狐下更快一些，至今没找到原
-
本文向大家介绍JavaScript实现向右伸出的多级网页菜单效果，包括了JavaScript实现向右伸出的多级网页菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现向右伸出的多级网页菜单效果。分享给大家供大家参考。具体如下： 这里使用JavaScript实现向右伸出的多级网页菜单效果，鼠标放在左侧的主菜单上，右侧就伸展出二级菜单，基本没有美化，新手所写，欢迎指
-
本文向大家介绍js实现浮动在网页右侧的简洁QQ在线客服代码，包括了js实现浮动在网页右侧的简洁QQ在线客服代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现浮动在网页右侧的简洁QQ在线客服代码。分享给大家供大家参考。具体如下： 这是一个简洁版的QQ在线客服，其实重要的是这个JS函数，只要有了这个JS函数，实际上你完全可以写一个这样的在线客服，它是用JS+CSS去控制层的隐藏与展开
-
本文向大家介绍js实现带缓动动画的导航栏效果，包括了js实现带缓动动画的导航栏效果的使用技巧和注意事项，需要的朋友参考一下 话不多说，请看实例代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
本文向大家介绍js实现绿白相间竖向网页百叶窗动画切换效果，包括了js实现绿白相间竖向网页百叶窗动画切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果。分享给大家供大家参考。具体分析如下： 前面我们讲解了一个网页百叶窗切换动画效果，不过是横向百叶窗，这个是竖向百叶窗，代码基本一样： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍基于C#实现的仿windows左侧伸缩菜单效果，包括了基于C#实现的仿windows左侧伸缩菜单效果的使用技巧和注意事项，需要的朋友参考一下 本文所述为基于C#实现的折叠菜单，风格仿照Windows打开我的电脑后左侧的伸缩菜单效果，并且同样是蓝色的效果，看着和windows的效果一样漂亮，可以实现折叠、展开等功能。这在学习C#界面编程的时候能用上，其主要实现代码如下： 这里只展示了主