js實現(xiàn)滑動門效果的詳細代碼分享-創(chuàng)新互聯(lián)

這篇文章主要為大家詳細介紹了js實現(xiàn)滑動門效果的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

創(chuàng)新互聯(lián)是一家專業(yè)提供霍山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、成都網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為霍山眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

一、實現(xiàn)滑動門所需技術(shù)

1、簡單的HTML基礎(chǔ)知識

2、簡單的CSS基礎(chǔ)樣式

3、基本的javascript知識

二、實現(xiàn)方法

HTML

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';
//設(shè)置每道門的初始位置
function SetImgsPos(){
for(var i = 1;i
關(guān)于js實現(xiàn)滑動門效果的詳細代碼就分享到這里了，當然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
            

            當前標題：js實現(xiàn)滑動門效果的詳細代碼分享-創(chuàng)新互聯(lián)            

            分享鏈接：http://m.jiaotiyi.com/article/doihde.html