js如何实现滑动门效果

前端  /  管理员 发布于 7年前   350

一、实现滑动门所需技术

1、简单的HTML基础知识

2、简单的CSS基础样式

3、基本的javascript知识

（推荐教程：javascript教程）

二、实现方法

HTML

<div id="container">  <img src="images/20190503222903.png"/><!--图片可以自己修改-->  <img src="images/20190503222943.png"/>  <img src="images/20190503223003.png"/>  <img src="images/20190503223514.png"/></div>

CSS

*{  margin: 0;  padding: 0;  background-color: #ccc;}p{  text-align: center;}#container{  width: 1130px;  height: 350px;  margin: 0 auto;  border-right:1px solid #FF0000;  border-bottom:1px solid #FF0000;  overflow: hidden;  position: relative;}#container img{  width:500px;  height:350px;  display: block;  position: absolute;  border-bottm:1px solid #FF0000;}

JS

//加载dom树window.onload = function(){//定义盒子var box=document.getElementById('container');//定义图片var imgs=box.getElementsByTagName('img');//图片宽度var imgWidth = imgs[0].offsetWidth;//隐藏宽度var exposeWidth = 210;//盒子宽度var boxWidth = imgWidth + (imgs.length -1) * exposeWidth;box.style.width='px';//设置每道门的初始位置function SetImgsPos(){for(var i = 1;i<imgs.length;i++){      imgs[i].style.left = imgWidth + exposeWidth*(i -1)+ 'px';      }    }    SetImgsPos();     //计算每道门应该移动的距离    var translate = imgWidth - exposeWidth;    //为每道门绑定事件    for(var i=0;i<imgs.length;i++){      //使用立即调用的函数表达式，为了获得不同的i值      (function(i){        imgs[i].onmouseover = function(){          SetImgsPos();          //打开门          for(var j=1;j<=i;j++){imgs[j].style.left = parseInt(imgs[j].style.left,10) - translate + 'px';          }        }      })(i);    }  }

更多编程相关内容，请关注编程入门栏目！

以上就是js如何实现滑动门效果的详细内容，更多请关注其它相关文章！