带动画效果的网页右侧伸缩窗口

最新推荐文章于 2024-08-31 10:45:00 发布

xiaofengxiaoling

最新推荐文章于 2024-08-31 10:45:00 发布

阅读量1.2k

点赞数

分类专栏： java 文章标签： timer function xhtml null border html

本文链接：https://blog.csdn.net/xiaofengxiaoling/article/details/8099754

版权

java 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

<!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>