js-事件1_获取鼠标坐标clientX+scrollLeft及兼容性写法_跟随鼠标移动的divs

最新推荐文章于 2024-05-31 10:04:55 发布
最新推荐文章于 2024-05-31 10:04:55 发布
阅读量215 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/XChWaad/p/4913035.html
版权

一、获取鼠标坐标

　　clientX：鼠标到可视区边缘的距离；    scrollLeft:滚动条到页面顶端的距离（不可视区的距离）

　　兼容性写法：

　　var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

 

跟随鼠标移动的divs，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        div {
            width: 10px;
            height: 10px;
            background: #F00;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                var oDivs = document.getElementsByTagName("div");

                oDivs[0].style.left = oEvent.clientX + scrollLeft + "px";
                oDivs[0].style.top = oEvent.clientY + scrollTop + "px";

                for (var i = oDivs.length - 1; i > 0; i--) {
                    oDivs[i].style.left = oDivs[i - 1].style.left;
                    oDivs[i].style.top = oDivs[i - 1].style.top;
                }
            }

        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

转载于:https://www.cnblogs.com/XChWaad/p/4913035.html

weixin_30885111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础学习笔记
qq_42436532的博客
04-10 846
JS基础 1.运算符 1.1 自增运算符 var e = 10; var f = e++ + ++e; // 1. e++ = 10 e = 11 // 2. e = 12 ++e = 12 console.log(f); // 22 1.2 逻辑运算符 1.2.1 逻辑与 有假必假，两边都是true才返回true 对于数值和表达式： 语法： 表达式1 && 表达式2 如果第一个表达式的值为真，则返回表达式2 如果第一个表达式的值为假，则返回表达式1 conso
js学习笔记1
Junean的博客
04-07 754
js学习笔记整理
JavaScript核心-兼容性问题等（二）
qq_46199553的博客
08-13 2267
5.8 三种动态创建元素区别 document.write() element.innerHTML document.createElement() document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘 innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 createElement() 创建多个元素效率稍低一点点，但是结构更清晰 总结：不同浏览
JS-Pink
qq_40253426的博客
12-06 421
一、JavaScript基础 1.基本的输入输出语句 方法 说明 归属 alert(mesg) 浏览器弹出警示框 浏览器 console.log(mesg) 浏览器控制台打印输出信息 浏览器 prompt(info) 浏览器弹出输入框，用户可以输入 浏览器 <script> //输入框 prompt("用户输入"); //弹出警示框 alert("警示框") //控制台输出打印 console.log("用户看不到"); </script
Web APIs --JavaScript学习笔记（总）（包括DOM、BOM）
weixin_44400887的博客
04-15 501
DOM 1 基本语句 获取元素： getElementByld：获取带有ID的元素对象 getElementByTagName()：获取某类标签元素 getElementsByClassName(‘类名’)，根据类名获取某些元素集合 querySelector(‘选择器’) 根据指定选择器返回第一个元素对象，里面选择器需要加符号 .class，#id querySelectorAll(‘选择器’)返回指定选择器的所有对象集合 document.body //返回body元素对象 document.docu
黑马javascript笔记
firewrk的博客
01-17 1843
黑马js笔记
04-WebApl
人俗话不多
03-08 573
Web Apis 和 JS基础关联性 JS 的组成 API 和 Web api ​ MDN 详细 API : https://developer.mozilla.org/zh-CN/docs/Web/API API 是为我们程序提供的一个接口 , 帮助我们实现某种功能 Web API 主要针对 于浏览器提供的接口 , 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) . 主要针对于浏览器做交互效果 Web API 一般都有输入和输出 ( 函数的传参和返回值...
WebApis- BOM&DOM
sycVegetableDog的博客
03-01 229
是W3C的标准，主要学习页面交互功能实现交互效果； API是一些预先定义的函数，简单理解就是给程序员提供的一种工具，以便能轻松的实现想要完成的功能； Web APIs是浏览器的API； DOM 文档对象模型，是处理html或者xml的编程接口；可以通过里面的接口修改网页内容，样式，结构； 文档：一个文档就是一个页面，DOM中使用document表示； 元素：页面中所有的标签就是元素； 节点：网页中所有的内容都是节点，比如标签，内容，文本，注释等。 获取元素 根据id获取： 使用getElementB
JavaScript DOM笔记
Kami丶
09-22 340
DOM概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。 **注意：**IE中的多有DOM对象都是以COM对象的形式实现的。 文档：把一个html文件看成是一个文档，由于万物皆对象，所有把这个文档看成是一个对象。 htm...
JavaScript获取鼠标坐标的函数（兼容IE、FireFox、Chrome）
12-11
还好网上什么都有，上网找了一个浏览器兼容性最佳的函数，经测试兼容IE、FireFox、Chrome，并且不会有滚动条误差问题，存档下，以备后用 :slightly_smiling_face: 代码如下:function mousePos(e){ var x,y;...
get-client-xy:从鼠标或触摸事件获取坐标
05-23
从鼠标或触摸事件获取坐标。 安装 npm install get-client-xy 用法 import getClientXY from "get-client-xy" const [ x , y ] = getClientXY ( event ) 原料药 getClientXY（事件） 事件 类型： MouseEvent | ...
在页面中js获取光标/鼠标的坐标及光标的像素坐标
12-12
例如这次的，页面JS光标/鼠标坐标，你也许问着有什么用，百度统计中有个热点统计图，这下清楚明白了吧。 好了，上肉： 功能：获取光标的像素坐标 代码如下: <html> <head> [removed] function ...
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
12-03
用javascript获取鼠标位置： 代码如下: function mousePosition(ev) { if (ev.pageX || ev.pageY) { return { x: ev.pageX, y: ev.pageY }; } return { x: ev.clientX + document.body.scrollLeft – document.body....
JS获取鼠标坐标位置实例分析
11-26
本文实例分析了JS获取鼠标坐标位置的方法。分享给大家供大家参考，具体如下： 取鼠标坐标位置有这些：鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,...
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 507
记录一次前端页面崩溃的产生及处理
前端开发记录
最新发布
qq_25806839的博客
05-31 163
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 516
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【JS实战案例汇总——不定时更新版】
微木
05-30 336
练习JS的实用案例，倒计时算法、定时轮播图
JavaScript-鼠标事件（鼠标点击松开移动效果）
06-06
好的，以下是一个简单的示例代码，可以实现鼠标点击、松开和移动时的效果： ```html <!DOCTYPE html> <html> <head> <title>鼠标事件示例</title> <style> #box { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="box"></div> <script> // 获取元素 var box = document.getElementById("box"); // 定义变量，记录鼠标是否按下 var isMouseDown = false; // 添加鼠标按下事件 box.addEventListener("mousedown", function(event) { // 将变量设置为 true isMouseDown = true; // 记录鼠标按下时的位置 var x = event.clientX; var y = event.clientY; // 添加鼠标移动事件 document.addEventListener("mousemove", moveHandler); // 添加鼠标松开事件 document.addEventListener("mouseup", function() { // 将变量设置为 false isMouseDown = false; // 移除鼠标移动事件 document.removeEventListener("mousemove", moveHandler); }); // 鼠标移动事件处理函数 function moveHandler(event) { if (isMouseDown) { // 计算鼠标移动的距离 var deltaX = event.clientX - x; var deltaY = event.clientY - y; // 更新盒子的位置 box.style.left = parseInt(box.style.left) + deltaX + "px"; box.style.top = parseInt(box.style.top) + deltaY + "px"; // 更新 x 和 y 的值 x = event.clientX; y = event.clientY; } } }); </script> </body> </html> ``` 这段代码定义了一个红色的正方形盒子（100px × 100px），当鼠标按下该盒子并移动时，盒子会跟随鼠标移动。当鼠标松开时，盒子停止跟随移动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值