當前位置：
首頁 >
电商网站滑动门特效
發布時間：2025/4/9
49
豆豆
今天在慕課網學習了JavaScript滑動門特效，這個特效在電商網站上比較常見，難度適中，要對JavaScript和DOM比較熟悉。
?
一、實現HTML + CSS結構
首先編寫HTML代碼
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sliding doors</title> 6 <link rel="stylesheet" href="styles/reset.css" /> //重置瀏覽器樣式css，對本案例沒有影響，網上可以下載 7 <link rel="stylesheet" href="styles/slidingdoors.css" /> //本案例用到的css 8 <script src="scripts/slidingdoors.js"></script> //本案例用到的js 9 </head> 10 <body> 11 <div id='container'> //引入4張圖片 12 <img src="images/door1.png" alt="1080P神器" title="1080P神器" /> 13 <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" /> 14 <img src="images/door3.png" alt="四核5寸" title="四核5寸" /> 15 <img src="images/door4.png" alt="5.7寸機皇" title="5.7寸機皇" /> 16 </div> 17 </body> 18 </html>
編寫slidingdoors.css
1 #container { 2 height: 477px; 3 margin: 0 auto; 4 border-right: 1px solid #ccc; 5 border-bottom: 1px solid #ccc; 6 overflow: hidden; 7 position: relative; 8 } 9 10 #container img { 11 position: absolute; 12 display: block; 13 left: 0; 14 border-left: 1px solid #ccc; 15 }?
二、實現JS + DOM
編寫slidingdoors.js
1 window.onload = function() { 2 //容器對象 3 var box = document.getElementById('container'); 4 5 //獲得圖片NodeList對象集合 6 var imgs = box.getElementsByTagName('img'); 7 8 //單張圖片的寬度 9 var imgWidth = imgs[0].offsetWidth; 10 11 //設置掩藏門體露出的寬度 12 var exposeWidth = 160; 13 14 //設置容器總寬度 15 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth; 16 box.style.width = boxWidth + 'px'; 17 18 //設置每道門的初始位置 19 function setImgsPos() { 20 for (var i = 1, len = imgs.length; i < len; i++) { 21 imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px'; 22 } 23 } 24 setImgsPos(); 25 26 //計算每道門打開時應移動的距離 27 var translate = imgWidth - exposeWidth; 28 29 //為每道門綁定事件 30 for (var i = 0; i < imgs.length; i++) { 31 //為了獲得不同的i值，使用立即調用的函數表達式 32 (function(i) { 33 imgs[i].onmouseover = function() { 34 //先將每道門復位 35 setImgsPos(); 36 //打開門 37 for (var j = 1; j <= i; j++) { 38 imgs[j].style.left = parseInt(imgs[j].style.left, 10) - translate + 'px'; 39 } 40 } 41 })(i); 42 }; 43 44 }?
三、效果圖
（初始時）
?
?
?
（鼠標滑動到第二張圖片）
?
?
?
（鼠標滑動到第三張）
?
?
（鼠標滑動到第四張）
轉載于:https://www.cnblogs.com/zhangxuefeng/p/5174245.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
- 上一篇： 定义一个大整数类，并重载乘法*运算符
- 下一篇： 第四章第四个例题（LRJ)