初學(xué)者。
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比桑珠孜網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式桑珠孜網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋桑珠孜地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。
推拉門是網(wǎng)頁中常見的一種形式，通過JS實(shí)現(xiàn)比較簡單。主要是通過getElement找到節(jié)點(diǎn)元素，然后對(duì)其進(jìn)行相應(yīng)的賦值即可。
新建一個(gè)index.html文件，并在同一個(gè)目錄中添加三個(gè)文件夾，images(用來當(dāng)作“門”的圖片），styles（用來存放css文件），scripts(用來存放js文件)。然后在index.html中添加代碼：
sliding doors 
接著是styles目錄下的doors.css:
重慶分公司
重慶分公司
#container{
height:600px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin:0 auto;
position:relative;
overflow:hidden;
}
#container img{
position:absolute;
border-left:1px solid #ccc;
display:block;
left:0;
}
然后是scripts目錄下的doors.js:
window.onload = function()
{
var box = document.getElementById("container"); //獲得容器對(duì)象
var imgs = box.getElementsByTagName("img"); //獲得圖片對(duì)象數(shù)組
imgWidth = imgs[0].offsetWidth; //圖片寬度
var exposeWidth = 100; //每張圖片露出的寬度
var boxWidth = imgWidth + exposeWidth * (imgs.length - 1);
box.style.width = boxWidth + "px";
//初始化圖片位置
function reset()
{
for(var i = 1; i < imgs.length; i ++)
{
imgs[i].style.left = imgWidth + (i - 1) * exposeWidth + "px";
}
}
reset();
//開門時(shí)候每個(gè)圖片應(yīng)該左移的距離
var translate = imgWidth - exposeWidth;
//為每個(gè)圖片添加事件
for(var i = 0; i < imgs.length; i ++)
{
//自動(dòng)執(zhí)行函數(shù)
(function(i){
imgs[i].onmouseover = function()
{
//重置圖片位置
reset();
for(var j = 1; j <= i; j ++)
{
imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + "px";
}
};
})(i);
}
};
這樣即可實(shí)現(xiàn)推拉門效果。
以上所述是小編給大家介紹的js實(shí)現(xiàn)圖片推拉門效果代碼實(shí)例詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
