js实现鼠标滑动背景跟随

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js实现鼠标滑动背景跟随</title>
 6     <style>
 7         body{
 8             background: black;
 9         }
10         img{
11             position: absolute;
12             left: 10px;
13             top: 10px;
14             width: 100px;
15             height: 100px;
16         }
17     </style>
18     <script>
19         window.onload = function () {
20             var img = document.getElementsByTagName("img");
21             document.onmousemove = function (far) {
22                 e = far||event;
23                 for(var i=img.length-1; i>0; i--){
24                     img[i].style.left = img[i-1].style.left;
25                     img[i].style.top = img[i-1].style.top;
26                 }
27                 img[0].style.left = e.clientX-50+"px";
28                 img[0].style.top = e.clientY-50+"px";
29             }
30         }
31     </script>
32 </head>
33 <body>
34 
35     <img src="image/girl.gif"/>
36     <img src="image/girl.gif"/>
37     <img src="image/girl.gif"/>
38     <img src="image/girl.gif"/>
39     <img src="image/girl.gif"/>
40     <img src="image/girl.gif"/>
41     <img src="image/girl.gif"/>
42 
43 </body>
44 </html>

 

posted @ 2017-08-21 14:59  宋发元  阅读(639)  评论(0)    收藏  举报