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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
微信小程序文章列表功能完整实例
Jun 03 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
显示程序执行时间php函数代码
2013/08/29 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
js继承的实现代码
2010/08/05 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[01:01:04]2018DOTA2亚洲邀请赛 4.5 淘汰赛 OpTic vs TNC 第一场
2018/04/06 DOTA
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
浅析Python requests 模块
2020/10/09 Python
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
阿尔卡特(中国)的面试题目
2014/08/20 面试题
2019史上最全Database工程师题库
2015/12/06 面试题
师范应届生教师求职信
2013/11/05 职场文书
教师自荐信
2013/12/10 职场文书
大学生求职信怎么写
2015/03/19 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
vue实现拖拽交换位置
2022/04/07 Vue.js