zoukankan      html  css  js  c++  java
  • 一串东西跟着鼠标走

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style>
     7             div{width: 10px; height: 10px;background-color:red;position: absolute;}
     8         </style>
     9         <script>
    10             function getPosition(ev){
    11                 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    12                 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    13 
    14                 return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
    15             }
    16             document.onmousemove=function(ev){
    17                 var oEvent=ev||event;
    18                 var aDiv=document.getElementsByTagName('div');
    19                 var position=getPosition(oEvent);
    20                 
    21                 for(var i=aDiv.length-1;i>0;i--){
    22                     aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
    23                     aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
    24                 }
    25 
    26                 aDiv[0].style.left=position.x+'px';
    27                 aDiv[0].style.top=position.y+'px';
    28             }
    29         </script>
    30     </head>
    31     <body>
    32         <div>
    33         </div>
    34         <div>
    35         </div>
    36         <div>
    37         </div>
    38         <div>
    39         </div>
    40         <div>
    41         </div>
    42         <div>
    43         </div>
    44         <div>
    45         </div>
    46         <div>
    47         </div>
    48         <div>
    49         </div>
    50         <div>
    51         </div>
    52         <div>
    53         </div>
    54         <div>
    55         </div>
    56         <div>
    57         </div>
    58         <div>
    59         </div>
    60         <div>
    61         </div>
    62         <div>
    63         </div>
    64         <div>
    65         </div>
    66         <div>
    67         </div>
    68         <div>
    69         </div>
    70         <div>
    71         </div>
    72         <div>
    73         </div>
    74         <div>
    75         </div>
    76         <div>
    77         </div>
    78         <div>
    79         </div>
    80         <div>
    81         </div>
    82         <div>
    83         </div>
    84         <div>
    85         </div>
    86         <div>
    87         </div>
    88         <div>
    89         </div>
    90         <div>
    91         </div>
    92         <div>
    93         </div>
    94         <div>
    95         </div>
    96         <div>
    97         </div>
    98     </body>
    99 </html>
    View Code
  • 相关阅读:
    mysql 慢查询分析工具
    php+redis实现消息队列
    Mysql数据库千万级数据查询优化方案.....
    windows下安装docker详细步骤
    Git基础使用教程
    redis实现消息队列&发布/订阅模式使用
    macos上改变输入法顺序
    ssh动态转发小记
    ubuntu上runsv/runit小记
    使用libcurl下载https地址的文件
  • 原文地址:https://www.cnblogs.com/shangec/p/12793439.html
Copyright © 2011-2022 走看看