今天在慕课网学习了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 { 2height: 477px; 3margin: 0 auto; 4border-right: 1px solid #ccc; 5border-bottom: 1px solid #ccc; 6overflow: hidden; 7position: relative; 8 } 9 10 #container img {11position: absolute;12display: block;13left: 0;14border-left: 1px solid #ccc;15 }
二、实现JS + DOM
编写slidingdoors.js
1 window.onload = function() { 2//容器对象 3var box = document.getElementById('container'); 4 5//获得图片NodeList对象集合 6var imgs = box.getElementsByTagName('img'); 7 8//单张图片的宽度 9var imgWidth = imgs[0].offsetWidth;1011//设置掩藏门体露出的宽度12var exposeWidth = 160;13 14//设置容器总宽度15var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth;16box.style.width = boxWidth + 'px';17 18//设置每道门的初始位置19function setImgsPos() {20 for (var i = 1, len = imgs.length; i < len; i++) {21 imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px';22 }23}24setImgsPos();25 26//计算每道门打开时应移动的距离27var translate = imgWidth - exposeWidth;28 29//为每道门绑定事件30for (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 }
三、效果图
（初始时）
（鼠标滑动到第二张图片）
（鼠标滑动到第三张）
（鼠标滑动到第四张）
