电商网站滑动门特效

时间：2016-02-01 02:08:48 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：

今天在慕课网学习了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 }