基于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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 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操作XML作为数据库的类
2010/12/19 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
php实现的顺序线性表示例
2019/05/04 PHP
jQuery遍历Form示例代码
2013/09/03 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JS实现页面打印功能
2017/03/16 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
微信小程序实现选择地址省市区三级联动
2020/06/21 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python爬取京东的商品分类与链接
2016/08/26 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python中import机制详解
2017/11/14 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
python可视化实现KNN算法
2019/10/16 Python
Python 实现自动导入缺失的库
2019/10/29 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
迟到检讨书300字
2014/02/14 职场文书
企业元宵节主持词
2014/03/25 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
地陪导游欢迎词
2015/01/26 职场文书
《鲸》教学反思
2016/02/23 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
Python装饰器详细介绍
2022/03/25 Python