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 交通频道 作文范文 莫名,我就喜欢你。 基因葡萄作文900字 对校长汇报发言的点评 善意的谎言也美丽 我家的新成员作文200字 有些东西一定不能丢掉,有些东西真的该丢掉了 星新一,我的偶像 高山流水的意思_高山流水造句 2016周年庆典节目主持词 秋天到了我喜欢秋天100字 采洋槐花作文400字 一路上的美丽风景作文 产业发展处下半年工作计划 2015四年级英语演讲稿 名侦探柯南----浪漫的情人节 2016年学校图书室工作计划 父亲节的由来简短英文版:父亲节的由来 走在路上作文500字 小学四年级作文350字:青春同路人 “说谎”的妈妈_关于侧面描写母爱的小学生作文350字 关于治理商业贿赂情况的汇报 小学四年级作文700字:“很好”和“差劲” 内地青春励志电影 一朵凋零的玫瑰 万圣节的简单祝词 我爱夜黑 要麽立即***!要麽就好好活着!努力活着!用力活着! 聪智王爷调皮妃【1】作文1100字 初中初二作文400字:我 《芈月传》给女人的启示:女人的格局决定结局 没有人能替你奋斗 人与鸟儿共享蓝天作文600字 市容局党组践行科学发展观分析检查报告 关于爱情的经典语句 爱情是场梦,可有些人却总睡过了头 七月天作文200字 两学一做学习心得体会:从“我”开始 两粒种子作文700字 中国梦——民族的灵魂 四川地震评论:天佑汶川,我们在一起 初中初二作文800字:至爱亲情 毕业生求职信-数控专业 感动作文2400字 拥抱大海600字 职场励志:成功创业者的7个习惯 关于螃蟹的作文200字 同学之间作文150字 想念,那一片海 50条不成文的规矩:不回微信前,请别发朋友圈 警方搜据为何要悄悄进行 非常经典的说说心情短语

Copyright © 2016 phpStudy |