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>

 

目录
相关文章
|
1月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
81 10
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
41 4
|
6月前
|
JavaScript 前端开发
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
杨老师课堂之JavaScript悬浮事件(鼠标移入移出事件)
41 1
|
6月前
|
Web App开发 监控 JavaScript
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容
JS 鼠标框选(页面选择)时返回对应的 HTML 或文案内容 当用户进行鼠标框选选择了页面上的内容时,把选择的内容进行上报。 分为以下几点: 选择文案时 选择图片、svg、iframe、video、audio 等标签时 选择 input、select、textarea 等标签时 选择 input、textarea 标签内容时 选择类似 &nbsp; 字符时 键盘全选时 鼠标右键选择 以上各模块结合时 当包含标签的时候,返回 html 结构,只有文本时返回文本内容
83 1
|
5月前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
27 0
|
6月前
|
JavaScript
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
一篇文章讲明白js鼠标侧键监听(也有左键,中键和右键)
296 0
|
7月前
|
JavaScript 前端开发
JavaScript实现点击鼠标弹钢琴的效果
JavaScript实现点击鼠标弹钢琴的效果
32 0
|
7月前
|
JavaScript 前端开发
JavaScript实现鼠标移动特效
JavaScript实现鼠标移动特效
46 0
|
7月前
|
JavaScript
js的鼠标移入移出事件
js的鼠标移入移出事件
|
7月前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理