基于vue的ui框架|基于JavaScript实现滑动门效果

更新时间:2021-07-26    来源:php框架模板    手机版     字体:

【www.bbyears.com--php框架模板】

滑动门效果:


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

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

程序:

 

 代码如下

<script type="text/javascript">

 window.onload =function() {

  varcontainer = document.getElementById("container");

  varimgs = container.getElementsByTagName("img");//获取图像

  varimgWidth = imgs[0].offsetWidth;//图片的宽度

  varexposeWidth = 200;//露出的宽度

  varcontainerWidth = imgWidth + exposeWidth * (imgs.length - 1);//外部盒子的总宽度

  container.style.width = containerWidth +"px";

 

  functionInitial() {

   for(vari = 1; i < imgs.length; i++) {

    imgs[i].style.left = imgWidth + exposeWidth * (i - 1) +"px";

   }

  }

  Initial(); 

  vartranslateWidth = imgWidth - exposeWidth;//移动的距离

  for(vari = 0; i < imgs.length; i++) {

   (function(i) {

    imgs[i].onmouseover =function() {

     Initial();//鼠标经过图片时,首先设置到初始状态

     for(varj=1;j<=i;j++) {//之前的图片都移动相同的距离

      imgs[j].style.left=parseInt(imgs[j].style.left)-translateWidth+"px";

     }

    }

   })(i);

  }

 

 }

</script>

 

本文来源:http://www.bbyears.com/jiaocheng/132144.html