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

前端技术 2023/09/04 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10574

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案