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 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
JS数组去重的6种方法完整实例
Dec 08 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
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
php 表单数据的获取代码
2009/03/10 PHP
PHP 万年历实现代码
2012/10/18 PHP
基于initPHP的框架介绍
2013/04/18 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
跟我学Laravel之配置Laravel
2014/10/15 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP copy函数使用案例代码解析
2020/09/01 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JS实现留言板功能
2017/06/17 Javascript
js微信分享实现代码
2020/10/11 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python爬虫之urllib,伪装,超时设置,异常处理的方法
2018/12/19 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python用dilb提取照片上人脸的示例
2020/10/26 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
2014年端午节演讲稿范文
2014/05/23 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年初一班主任工作总结
2014/11/08 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js