小米手机图片（点击上班边图片向上走，点击下边向下走） 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .xiaomi {
 8             width: 512px;
 9             height: 400px;
10             border: 1px solid #f00;
11             margin: 100px auto;
12             overflow: hidden;
13             position: relative;
14         }
15         .xiaomi span {
16             position: absolute;
17             left: 0;
18             width: 100%;
19             height: 200px;
20             cursor: pointer;
21         }
22         .up {
23             top: 0;
24         }
25         .down {
26             bottom: 0;
27         }
28         #pic {
29             position: absolute;
30             top: 0;
31             left: 0;
32         }
33     </style>
34 </head>
35 <body>
36 <div class="xiaomi">
37     <img src="mi.png" alt="" id="pic"/>
38     <span class="up" id="picUp"></span>
39     <span class="down" id="picDown"></span>
40 </div>
41 </body>
42 </html>
43 <script>
44     function $(id) { return document.getElementById(id);}
45     var num = 0; // 控制图片的top值
46     var timer = null; // 定时器名称
47     $("picUp").onmouseover = function(){
48         // alert(11);
49         clearInterval(timer);
50         timer =  setInterval(function(){
51             num -= 3;
52             /** var aa=$("pic").offsetHeight-$("xiaomi").offsetHeight;**/
53 
54             num >= -1070 ? $("pic").style.top = num + "px" :  clearInterval(timer);
55 
56         },30);
57     }
58     $("picDown").onmouseover = function(){
59         clearInterval(timer);
60         timer  = setInterval(function(){
61             num++;
62             num < 0 ?  $("pic").style.top = num + "px" : clearInterval(timer);
63         },30);
64     }
65     $("picUp").parentNode.onmouseout = function() {
66         clearInterval(timer);
67     }
68 </script>

 

posted @ 2017-12-28 22:26  前端极客  阅读(209)  评论(0)  编辑  收藏  举报