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


Posted in Javascript onOctober 29, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
Apr 15 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 #Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 #Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 #Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 #Javascript
Jquery日历插件制作简单日历
Oct 28 #Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
Vue性能优化的方法
2020/07/30 Javascript
轻松实现python搭建微信公众平台
2016/02/16 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
劳资人员岗位职责
2013/12/19 职场文书
高中自我评价范文
2014/01/27 职场文书
表彰大会策划方案
2014/05/13 职场文书
黄山导游词
2015/01/31 职场文书
瘦西湖导游词
2015/02/03 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
2015年仓库工作总结
2015/04/09 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python