JS-鼠标跟随块(一个小圆点跟着鼠标跑)

简介: 1 DOCTYPE html> 2 3 4 5 6 7 8 9 .div {10 display: none;11 ...
 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>

 

目录
相关文章
|
25天前
|
JavaScript 前端开发
JavaScript实现鼠标放上去之后高亮显示且隔行换色
JavaScript实现鼠标放上去之后高亮显示且隔行换色
12 0
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
164 0
|
1月前
|
存储 JSON JavaScript
如何使用 JavaScript 代码创建虚拟鼠标点击事件
如何使用 JavaScript 代码创建虚拟鼠标点击事件
18 0
|
1月前
|
自然语言处理 JavaScript 前端开发
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
深入探索 JS 的提升机制、函数与块作用域以及函数表达式和声明(下)
|
4月前
|
JavaScript
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
【经典】原生JS实现“用鼠标拖拽(drag)内容DIV”,滚动条对应同步滚动
|
4月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
30 2
|
5月前
|
JavaScript 前端开发
JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath
JS javascript 点击鼠标 鼠标事件 获取元素 获取元素Xpath
58 0
|
5月前
|
JavaScript
网页里如何使用js屏蔽鼠标右击事件
网页里如何使用js屏蔽鼠标右击事件
28 0
|
7月前
|
JavaScript
JS实现鼠标拖动div移动
JS实现鼠标拖动div移动
|
7月前
|
JavaScript
js鼠标放图片上==放大镜显示效果demo效果示例(整理)
js鼠标放图片上==放大镜显示效果demo效果示例(整理)