JavaScript中怎么實現一個滑動門效果

JavaScript中怎么實現一個滑動門效果，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

一、什么是滑動門

首先你要了解什么是滑動門。生活中我們經常看到一些網站或是商城有一些滑動門的效果

那么怎么實現一個簡單的滑動門的網頁特效呢？下面簡單分享一下方法,

二、實現滑動門所需技術

1、簡單的HTML基礎知識2、簡單的CSS基礎樣式3、基本的javascript知識

三、如何實現滑動門（重點）

準備好一段HTML代碼

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

給當前HTML結構添加樣式

*{  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);    }  }

關于JavaScript中怎么實現一個滑動門效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。