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


本文实例讲述了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程序设计有所帮助。



相关阅读:
html5 svg 中元素点击事件添加方法
php出现web系统多域名登录失败的解决方法
c++动态内存空间示例(自定义空间类型大小和空间长度)
JS实现仿新浪黄色经典滑动门效果代码
Android编程之ListPreference用法实例分析
win10升级C盘东西还有吗 win10自动升级后桌面文件会丢失吗
Android编程实现泡泡聊天界面实例详解(附源码)
基于javascript简单实现对身份证校验
8个实用的jQuery技巧
MySQL性能优化
Win10 Mobile预览版10563上手图集:Edge书签同步等多处改进
PHP中如何调用webservice的实例参考
Android中监听短信的两种方法
Android HTTP网络请求的异步实现
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 容易与重要 公司员工年度工作计划 古典风格情人节短信 遇见(8)(转载)作文1300字 藏在落叶中的秘密 小学六年级作文600字:第一场雪 勤学好问的老太太 青春一起fly作文400字 餐桌,椅子和勺子 百年老人的风雨人生 写事作文600字 这个文章深深的感触了十几万人 看图写话之大课间作文 精选2014年研究生入党申请书 小学六年级作文600字:难忘的商品交易会 假如我有一颗神奇的种子】 矿党委书记述职报告 回忆是一座忧伤的城 这就是我的同桌400字 莲,无法抗拒的美丽 感情悟 哭泣的我作文600字 笑是一种力量作文700字 蚋虫与蚊子 论市政工程施工组织设计与协调管理 “唱读讲传”活动汇报材料 对外贸易发展趋势调研报告 自信对待作文1200字 工艺工程师岗位职责 超搞笑愚人节祝福短信 电子商务专业毕业实习报告范文 宣传部长2016年述职报告 店长个人年终工作总结2015 清明节感言-缅怀革命烈士 大一暑期社会实践报告范文 兼职教研员个人工作总结 大学生入党申请书模版 七年级上册《紫藤萝瀑布》课件2 我们的爱,萦萦相绕 孤鸟 七夕个性祝福语 表白 2016租房合同范本 国旗下讲话:中秋节弘扬民族传统文化 大姑娘上花轿的歇后语 关于交通安全的手抄报 在廿四个钟头中 追逐梦的脚步作文800字 放弃中的心痛 刈稻了咏怀 请论证江夏饶峰饶浩成成功在望(113)

Copyright © 2016 phpStudy |