JavaScript 鼠标移动事件

今天我要分享的JavaScript鼠标移动事件的知识点

1.首先准备一个文件夹和一张GIF的动图，打开VS Code，新建一个文件,Ctrl+S保存文件，输入文件名，文本类型设置成HTML，如下图所示；

2.在文档里输入英文状态下的感叹号+回车键，如下图所示；

3.在body里输入img标签，把GIF图引入，在img标签里输入style属性，设置定位，宽和高如下图所示；

4.现在开始写JavaScript代码：

（1）获取img标签，然后添加鼠标移动事件，事件=事件或窗口事件。

（2）clientX和clientY用于获取当前看见窗口的坐标，clientX指的是鼠标指针的水平坐标，clientY指的是鼠标指针的垂直坐标。

（4）通过img的top和left设置鼠标在img的位置调整；

5.以下的是JS的代码

6.小结:

clientX和clientY用于获取鼠标当前可见坐标。

clientX指的是鼠标指针的水平坐标。

clientY指的是鼠标指针的垂直坐标。

这是我所学到的鼠标移动事件步骤，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

JavaScript 鼠标移动事件相关推荐

html鼠标响应事件吗,学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动 ...
JavaScript鼠标移动事件及案例
一.鼠标点击事件 1.onclick单击事件鼠标单击时事件处理函数 <input type="button" id="bt" value="点 ...
javascript鼠标右击事件
1.屏蔽浏览器自带的默认弹出上下文菜单的contextmenu事件. 2.使用mouseup或者mousedown事件监控鼠标的右键,就可以形成鼠标右击的事件. <!DOCTYPE html&g ...
Javascript鼠标滚轮事件兼容写法
1.mousewheel事件(兼容opera,chrome,safari,IE) mousewheel事件对应的event对象包含一个wheelDelta属性.用户滚动鼠标滚轮时,wheelDelta ...
Javascript鼠标键盘事件
鼠标事件 click:单击 dblclick:双击 mousedown:鼠标按下 mouseup:鼠标抬起 mouseover:鼠标悬浮 mouseout:鼠标离开 mousemove:鼠标移动 mo ...
JavaScript 鼠标滚轮事件（实现导航栏上滚显示）
文章目录 detail与wheelDelta 上下滚动检测隐藏导航栏例子当在垂直方向滚动页面时就会触发 mousewheel 事件 detail与wheelDelta 判断鼠标滚轮滚动方向在各浏览 ...
java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
javascript 鼠标事件总结
本文转自:http://www.jb51.net/article/21590.htm javascript的鼠标事件是个比较庞大的家族.需要的朋友可以参考下. 常见的有以下8个: mousedown: ...
js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监 ...

JavaScript 鼠标移动事件

JavaScript 鼠标移动事件相关推荐

最新文章

热门文章