zoukankan      html  css  js  c++  java
  • JS-鼠标跟随块(一个小圆点跟着鼠标跑)

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title></title>
     7         <meta name="author" content="郭菊锋/702004176@qq.com"/>
     8         <style type="text/css">
     9             .div {
    10                 display: none;
    11                 position: absolute;
    12                 width: 30px;
    13                 height: 30px;
    14                 margin: -15px 0 0 -15px;
    15                 background: rgba(37, 0, 255, 0.3);
    16                 -webkit-border-radius: 50%;
    17                 -moz-border-radius: 50%;
    18                 border-radius: 50%;
    19             }
    20         </style>
    21     </head>
    22 
    23     <body>
    24         <div id="div" class="div">
    25         </div>
    26     </body>
    27 
    28 </html>
    29 <script type="text/javascript">
    30     window.onload = function() {
    31         var oDiv = document.getElementById("div");
    32         window.onmousemove = function(ev) {
    33             var ev = ev || window.event;
    34             var ofLeft = document.documentElement.offsetLeft || document.body.offsetLeft;
    35             var ofTop = document.documentElement.offsetTop || document.body.offsetTop;
    36             var oLeft = ev.clientX + ofLeft;
    37             var oTop = ev.clientY + ofTop;
    38             oDiv.style.display = "block";
    39             oDiv.style.left = oLeft + "px";
    40             oDiv.style.top = oTop + "px";
    41         }
    42 
    43     }
    44 </script>
  • 相关阅读:
    MySQL之事务
    TP5之查询那些事
    TP5之上传多张图片
    PhpStorm之设置字体大小
    Git入门
    TP5之自定义分页样式
    TP之安全机制
    Navicat Premium连接服务器数据库
    IEnumerable 与 IEnumerable<T>
    关于递归
  • 原文地址:https://www.cnblogs.com/padding1015/p/6797136.html
Copyright © 2011-2022 走看看