Javascript特效：动态获取鼠标位置

知识点

clientX & clientY 相对于屏幕位置
offsetLeft & offsettop距离第一个有定位的父级盒子左边和上边的距离

运行效果

鼠标移动,不断更新坐标

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box {width: 500px;height: 500px;background-color: red;margin: 100px;}</style>
</head>
<body>
<div id="box"></div>
<div style="margin-left: 100px">坐标:<span id="zuobiao"></span></div>
<script>var box = document.getElementById('box');var zuobiao = document.getElementById('zuobiao');box.addEventListener('mousemove', function (ev) {var e = ev || window.event;var x = e.pageX- box.offsetLeft;var y = e.pageY- box.offsetTop;zuobiao.innerText = '(' + x + ',' + y + ')';})
</script>
</body>
</html>

Javascript特效：动态获取鼠标位置相关推荐

C#_动态获取鼠标位置的颜色
在上一篇,C#_动态获取鼠标坐标,中已经很轻松的获取到了鼠标移动时的动态坐标了.那么,像屏幕取色工具那样,该如何获取该坐标,该点的颜色值呢,这里还是利用原生态的API方法来实现. API声明: /// ...
获取鼠标位置和手机触摸点位置
思路获取鼠标位置和手机触摸位置的思路都是相同的: 1.是否可以获取到pageX和pageY,有直接取值 2.没有,获取clientX和clientY,这个值在不翻页的情况下是正确位置,如果翻页了还需 ...
JS获取鼠标位置，兼容IE FF
JS获取鼠标位置,兼容IE FF 由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事 ...
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现
Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现版权声明: 本文版权属于北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...
C++获取鼠标位置,移动鼠标
获取鼠标位置: 函数原型: WINUSERAPI BOOL WINAPI GetCursorPos(__out LPPOINT lpPoint);WINUSERAPI BOOL WINAPI GetP ...
Python获取鼠标位置，虚拟键盘操作
Python获取鼠标位置,虚拟键盘操作 PS: 也是从网上各个帖子中学习的Python,因此代码的格式以及内容有粘贴网上其他大神的代码,如有侵权请告知删除代码转载:https://blog.csdn ...
Panda3D 获取鼠标位置、Panda3D任务管理器
看一下Panda3D Bump-Mapping示例: 运行起来是一个鼠标控制模型的例子: 它的Bump-Mapping是模型表面两种不同的效果:先不管: 它的房子模型单独用pview看一下如下: 先看 ...
powershell 获取鼠标位置与鼠标点击
文章目录获取鼠标位置鼠标一段事件未移动,点击右键获取鼠标位置 [void][reflection.assembly]::Load('System.Windows.Forms, Version=2 ...
h5+js 移动端监听点击、移动、松开，获取鼠标位置
//点击 document.addEventListener('touchstart', function(){}); //移动 document.addEventListener('touchmov ...
js 获取鼠标在画布的位置_JS获取鼠标位置（鼠标坐标）
在 JavaScript 中,当事件发生时,获取鼠标的位置是件很重要的事件.由于浏览器的不兼容性,不同浏览器分别在各自事件对象中定义了不同的属性,说明如下表所示.这些属性都是以像素值定义了鼠标指针的坐 ...

Javascript特效：动态获取鼠标位置

知识点

运行效果

代码

Javascript特效：动态获取鼠标位置相关推荐

最新文章

热门文章