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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-05-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读