初學(xué)者。
推拉門是網(wǎng)頁(yè)中常見的一種形式，通過JS實(shí)現(xiàn)比較簡(jiǎn)單。主要是通過getElement找到節(jié)點(diǎn)元素，然后對(duì)其進(jìn)行相應(yīng)的賦值即可。
新建一個(gè)index.html文件，并在同一個(gè)目錄中添加三個(gè)文件夾，images(用來當(dāng)作“門”的圖片），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" style="margin: 0px; padding: 0px; outline: none; line-height: 25.2px; font-size: 14px; width: 660px; overflow: hidden; clear: both; font-family: tahoma, arial, "Microsoft YaHei";"> #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ì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
