基于JavaScript实现滑动门效果


Posted in Javascript onMarch 16, 2017

本文实例为大家分享了滑动门效果的具体代码,供大家参考,具体内容如下

滑动门效果:

基于JavaScript实现滑动门效果

原理:

一共四道门,初始情况下,第一道门打开,其他三道门关闭,如第一个图所示。
假设图片的宽度是120px,其他三道门露出的宽度是80px。
初始状态下,
第二道门左边的距离是120px,
第三道门左边的距离是200px,
第四道门左边的距离是280px。
当第二道门打开时,
第二道门左边的距离是80px,为(120-40)px
第三道和第四道门左边的距离不变。
当第三道门打开时,
第二道门左边的距离是80px,
第三道门左边的距离是160px。(200-40)px
第四道门不变

基于JavaScript实现滑动门效果

因此每道门打开,是图片的宽度减去露出的宽度,就是需要向左移动的距离。第三道门打开,第二道门需要先做移动,然后第三道门移动。每道门移动的距离都是图片的宽度减去露出来的宽度。

程序:

<script type="text/javascript">
 window.onload = function() {
  var container = document.getElementById("container");
  var imgs = container.getElementsByTagName("img");//获取图像
  var imgWidth = imgs[0].offsetWidth;//图片的宽度
  var exposeWidth = 200;//露出的宽度
  var containerWidth = imgWidth + exposeWidth * (imgs.length - 1); //外部盒子的总宽度
  container.style.width = containerWidth + "px";

  function Initial() {
   for(var i = 1; i < imgs.length; i++) {
    imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + "px";
   }
  }
  Initial();  
  var translateWidth = imgWidth - exposeWidth;//移动的距离
  for(var i = 0; i < imgs.length; i++) {
   (function(i) {
    imgs[i].onmouseover = function() {
     Initial(); //鼠标经过图片时,首先设置到初始状态
     for (var j=1;j<=i;j++) { //之前的图片都移动相同的距离
      imgs[j].style.left=parseInt(imgs[j].style.left)-translateWidth+"px";
     }
    }
   })(i);
  }

 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
通过AngularJS实现图片上传及缩略图展示示例
Jan 03 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
Nov 01 Javascript
VUE中使用MUI方法
Feb 12 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
基于Vue2.0的分页组件
Mar 16 #Javascript
原生js实现验证码功能
Mar 16 #Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 #Javascript
vue图片加载与显示默认图片实例代码
Mar 16 #Javascript
js中作用域的实例解析
Mar 16 #Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
JS实现页面打印功能
Mar 16 #Javascript
You might like
PHP学习之整理字符串
2011/04/17 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
jquery实现简单的全选和反选功能
2016/01/02 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
python 中文字符串的处理实现代码
2009/10/25 Python
Python中的闭包详细介绍和实例
2014/11/21 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
Python本地与全局命名空间用法实例
2015/06/16 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
python使用sqlite3时游标使用方法
2018/03/13 Python
python实现归并排序算法
2018/11/22 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
django迁移数据库错误问题解决
2019/07/29 Python
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
委托证明模板
2014/09/16 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL