JS+DOM实例一：鼠标滑动图片

　　经常，我们在浏览各种网页的时候，都会有各种动画效果展示，像下图所示的是很多网上商城常用的货品展示方式，同类的货品并排展现在窗口上，用户如果看中了哪一款商品想要查看详情的话，只要将鼠标放上该商品的区域，原本折叠起来的商品便会自动展开，详情便会展现在用户面前，而这一动画，就是利用了DOM+JS结合来实现的，今天的小练习就是要实现这个效果。

首先，先将页面基本的框架用html实现，将四张图封装在了一个名为“container”的div块中

 1 <!doctype html>
 2 <meta charset="UTF-8">
 3 <html>
 4     <head>
 5         <title>
 6         鼠标滑过页面自动变大
 7         </title>
 8         <link rel="stylesheet" href="styles/reset.css" />
 9         <link rel="stylesheet" href="styles/slidingdoors.css" />
10         <script src="slidlingdoors.js"></script>
11     </head>
12     <body>
13     <div id="container">
14         <img src="./images/door1.png"/>
15         <img src="./images/door2.png"/>
16         <img src="./images/door3.png"/>
17         <img src="./images/door4.png"/>
18     </div>
19     </body>
20 </html>

接着，我将大体的样式用了两个样式表修饰如下：

依次为

slidingdoors.css和reset.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 }

 1 /**
 2  * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 3  * http://cssreset.com
 4  */
 5 html, body, div, span, applet, object, iframe,
 6 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 7 a, abbr, acronym, address, big, cite, code,
 8 del, dfn, em, img, ins, kbd, q, s, samp,
 9 small, strike, strong, sub, sup, tt, var,
10 b, u, i, center,
11 dl, dt, dd, ol, ul, li,
12 fieldset, form, label, legend,
13 table, caption, tbody, tfoot, thead, tr, th, td,
14 article, aside, canvas, details, embed, 
15 figure, figcaption, footer, header, hgroup, 
16 menu, nav, output, ruby, section, summary,
17 time, mark, audio, video {
18     margin: 0;
19     padding: 0;
20     border: 0;
21     font-size: 100%;
22     font: inherit;
23     vertical-align: baseline;
24 }
25 /* HTML5 display-role reset for older browsers */
26 article, aside, details, figcaption, figure, 
27 footer, header, hgroup, menu, nav, section {
28     display: block;
29 }
30 body {
31     line-height: 1;
32 }
33 ol, ul {
34     list-style: none;
35 }
36 blockquote, q {
37     quotes: none;
38 }
39 blockquote:before, blockquote:after,
40 q:before, q:after {
41     content: '';
42     content: none;
43 }
44 table {
45     border-collapse: collapse;
46     border-spacing: 0;
47 }

接下来，就要实现滑动效果了，js代码如下：

 1 window.onload=function(){
 2     var box=document.getElementById("container");
 3     var imgs=box.getElementsByTagName("img");
 4     var imgwidth=imgs[0].offsetWidth;
 5     var exposewidth=160;
 6     var boxwidth=imgwidth+exposewidth*(imgs.length-1);
 7     box.style.width=boxwidth+'px';
 8     function setImgPos(){
 9         for(var i=1;i<imgs.length;i++)
10         {
11             imgs[i].style.left=imgwidth+exposewidth*(i-1)+'px';
12         }
13     }
14     setImgPos();
15     var translate=imgwidth-exposewidth;
16     for(var i=0;i<imgs.length;i++)
17     {
18         (function(i){
19             imgs[i].onmouseover=function(){
20                 setImgPos();
21                 for(var j=1;j<=i;j++)
22                 {
23                     imgs[j].style.left=parseInt(imgs[j].style.left,10)-translate+'px';
24                 }
25             };
26         })(i);
27     }
28 };

弄好后的效果图如下：

遇到的问题：

1.图片复位函数中i、j变量傻傻分不清；

2.做出来的效果一张图片复位后把其余未复位图片都挡住了，主要是复位函数出了小问题。

经验：js函数变量复杂，逻辑严谨，写代码时一定要谨慎小心