今天在慕课网学习了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 }
三、效果图
（初始时）
（鼠标滑动到第二张图片）
（鼠标滑动到第三张）
（鼠标滑动到第四张）
时间： 2024-12-13 00:02:27