JS实现网页右侧带动画效果的伸缩窗口代码

本文实例讲述了射流研究…实现网页右侧带动画效果的伸缩窗口代码。分享给大家供大家参考，具体如下：

这是一款带缓冲效果的网页右侧固定伸缩窗口，点击带颜色的区域，浮动的层窗口就会伸缩出来，再次点击则缩进去。无jQuery，完全Java脚本语言实现的效果。

运行效果截图如下：

在线演示地址如下：

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/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML '标题带缓冲效果的网页右侧固定伸缩窗口/title meta http-equiv=' content-type ' content=' text/html；charset=GB 2312 '样式类型=' text/CSS ' # common _ box { width :300 px；位置：固定；_ position : absolute eright :0 top :40%；border:1px固体# 789;背景# fff{宽度：30像素}上的z-index :88 } # CLI _ on高度：180 pxfloat:leftcursor:pointer指针指针；背景# ac8932文本对齐：居中；行高：180 px }/style/head dydiv style=' width :100%；高度：1024px背景： # 789 '/div div id=' common _ box ' div id=' CLI _ on '/div div这里放置菜单内容/div/div脚本类型=' text/JavaScript '窗口。onload=function(){ var combox=document。getelementbyid(' common _ box ')；var CLI _ on=文档。getelementbyid(' CLI _ on ')；var flag=true，timer=null，initime=null，r _ len=0；cli_on.onclick=function () { /*如果不需要动态效果，这两句足矣combox.style.right=flag？-270 px ' :0；flag=！旗帜；*/clear time out(initime)；//根据状态旗执开展开收缩if(flag){ r _ len=0；timer=setInterval(slideright，10)；} else { r _ len=-270；timer=setInterval(slideleft，10)；} } //展开函数向右滑动(){ if(r _ len=-270){ clearInterval(计时器)；flag=！旗帜；返回false } else { r _ len-=5；组合盒。风格。right=r _ len ' px} } //收缩函数向左滑动(){ if(r _ len=0){ clearInterval(计时器)；flag=！旗帜；返回false } else { r _ len=5；组合盒。风格。right=r _ len ' px} } //加载后3秒页面自动收缩initime=setTimeout(' CLI _ on。点击()'，3000)；}/脚本/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。