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>

转载于:https://www.cnblogs.com/padding1015/p/6797136.html

JS-鼠标跟随块（一个小圆点跟着鼠标跑）相关推荐

html++鼠标跟随动画,5分钟实现Canvas鼠标跟随动画背景
关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧前言相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到 ...
用Html+js自己写了一个小游戏
刚接触HTML,感觉挺好玩儿的,自己做了一个小游戏,我要放上来,哈哈!! <!DOCTYPEHTML> <html><head><meta charset=& ...
vue 画一个小圆点
效果图: 方法1: <span style="margin: 0 10px;font-size: 36px">•</span> 右击右下角输入法,点击表情符 ...
html++鼠标跟随动画,css3动画过渡实现鼠标跟随导航效果
本篇文章主要介绍了css3动画过渡实现鼠标跟随导航效果,分享给大家,具体如下: 鼠标跟随导航效果效果知识点:html/css布局思维, div+css讲解,css3动画,盒子模型, 浮动与定位,鼠标 ...
html小卡片跟着鼠标移动,一个简单的工具：制作互动小卡片
这些天,有位美国朋友AJ向我们学习中文.我就义不容辞地当起了中文老师.在面对面一对一的教学中,AJ很快地学会了一些日常用语.比如"你好""早上好""下 ...
刚学玩原生JS,自己写了一个小游戏，希望在以后能不断地进步加以改善
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
[JS] 关于parseInt的一个小知识：[‘1‘, ‘2‘, ‘3‘].map(parseInt)
主要是在笔试里看到了,自己试下.. let a = ['1', '2', '3'].map(parseInt) console.log(a) 运行结果: 反正当时是做错了,QAQ 查了一下原理,感谢大 ...
js面向对象写法，一个小例子
/*** * 这是一个校验文件*/ var MyValidation = function(){//校验数据库this.validDatabase = function(source){if(sour ...
关于jQuery.query.js 取参数的一个小问题
形如:http://localhost:10864/srch.htm?keys=&type=1 这样的地址,如果我们要取keys的参数: var srchKey = $.query.get(& ...

JS-鼠标跟随块（一个小圆点跟着鼠标跑）

JS-鼠标跟随块（一个小圆点跟着鼠标跑）相关推荐

最新文章

热门文章