溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
初學者。
推拉門是網(wǎng)頁中常見的一種形式，通過JS實現(xiàn)比較簡單。主要是通過getElement找到節(jié)點元素，然后對其進行相應的賦值即可。
新建一個index.html文件，并在同一個目錄中添加三個文件夾，images(用來當作“門”的圖片），styles（用來存放css文件），scripts(用來存放js文件)。然后在index.html中添加代碼：
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>sliding doors</title> <link rel="stylesheet" href="styles/doors.css" rel="external nofollow" /> <script src="scripts/doors.js"></script> </head> <body> <div id="container"> <img src="images/door1.jpg" alt="柯南" title="柯南"/> <img src="images/door2.jpg" alt="柯南" title="柯南"/> <img src="images/door3.jpg" alt="柯南" title="柯南"/> <img src="images/door4.jpg" alt="柯南" title="柯南"/> </div> </body> </html>
接著是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"); //獲得容器對象
var imgs = box.getElementsByTagName("img"); //獲得圖片對象數(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();
//開門時候每個圖片應該左移的距離
var translate = imgWidth - exposeWidth;
//為每個圖片添加事件
for(var i = 0; i < imgs.length; i ++)
{
//自動執(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);
}
};
這樣即可實現(xiàn)推拉門效果。
效果如下，截圖略微粗糙
以上所述是小編給大家介紹的js實現(xiàn)圖片推拉門效果代碼實例詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
