基于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使用prototype定义对象类型
Feb 07 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
May 14 Javascript
jquery滚动特效集锦
Jun 03 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
Oct 28 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP中的替代语法介绍
2015/01/09 PHP
ThinkPHP路由详解
2015/07/27 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
2009/12/02 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
nodejs中函数的调用实例详解
2018/10/31 NodeJs
JavaScript页面加载事件实例讲解
2019/09/01 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
python求解汉诺塔游戏
2020/07/09 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
实习科室评语
2015/01/04 职场文书
介绍信如何写
2015/01/31 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python