鼠标跟随测试 - 副本.html 947 B

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>Document</title>
  8. <style>
  9. div {
  10. width: 10px;
  11. height: 10px;
  12. background: blue;
  13. position: absolute;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div></div>
  19. <div></div>
  20. <div></div>
  21. <div></div>
  22. <div></div>
  23. <div></div>
  24. <div></div>
  25. <div></div>
  26. </body>
  27. <script>
  28. var aDiv=document.getElementsByTagName('div');
  29. document.onmousemove=function(ev){
  30. var oEvent=ev||event;
  31. for(var i=aDiv.length-1;i>0;i--){
  32. aDiv[i].style.left=aDiv[i-1].style.left;
  33. aDiv[i].style.top=aDiv[i-1].style.top;
  34. }
  35. aDiv[0].style.left=oEvent.clientX+'px';
  36. aDiv[0].style.top=oEvent.clientY+'px';
  37. }
  38. </script>
  39. </html>