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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
(function(){})()的用法与优点
Mar 11 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
详解用async/await来处理异步
Aug 28 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
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过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
Vue.directive自定义指令的使用详解
2017/03/10 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
用Python识别人脸,人种等各种信息
2019/07/15 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
html5实现滑块功能之type=&quot;range&quot;属性
2020/02/18 HTML / CSS
生产副总岗位职责
2013/11/28 职场文书
征兵宣传标语
2014/06/20 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
护士求职简历自我评价
2015/03/10 职场文书
英语教师求职信范文
2015/03/20 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
springboot读取nacos配置文件
2022/05/20 Java/Android
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android