博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS——事件详情(鼠标事件:clientX、clientY的用法)
阅读量:4509 次
发布时间:2019-06-08

本文共 483 字,大约阅读时间需要 1 分钟。

鼠标位置

》可视区位置:clientX、clientY

跟着鼠标移动的div案例

代码如下图:

 

这个案例,运用到前一篇文章中的event事件来处理。获取div的left和top值,当鼠标移动时,div的left和top值跟着鼠标位置改变而改变。(注意的是:需要给div设置绝对定位)

演示效果如下图:

 

但是!!!

当我给body设置高度时,改变body的高度,这个案例效果就发生变化了,变得很诡异。

代码如下图:

效果图显示如下:

为什么给body设置了一个2000px的高度后,这个案例就变得如此诡异呢???

原来,clientX和clientY解释为:鼠标的可视区坐标!!!!

 

看下面这张图,来简单解释一下:

修改代码,完成完整的案例。代码如下图:

其中的scrollTop可以参考本人的前面文章,里面有讲解scrollTop的语法和用法等  

【跳转自:中的(5)document.documentElement.scrollTop(获取滚动条位置)

 

转载于:https://www.cnblogs.com/ytraister/p/10959867.html

你可能感兴趣的文章
关于求最大公约数
查看>>
为Linux配置常用源:epel和IUS
查看>>
天府地
查看>>
C#高级编程
查看>>
JS实现从照片中裁切自已的肖像
查看>>
使用 https://git.io 缩短 a GitHub.com URL.
查看>>
Python:yield关键字
查看>>
EasyRTSPClient:基于live555封装的支持重连的RTSP客户端RTSPClient
查看>>
MySQL巡检
查看>>
学习笔记之传说中的圣杯布局
查看>>
共享内存的设计
查看>>
2017-2018-1 20155203 20155204 实验二 固件程序设计
查看>>
数据可视化视频制作
查看>>
mysql 数据备份。pymysql模块
查看>>
FactoryMethod模式——设计模式学习
查看>>
Android中 AsyncTask
查看>>
原码、反码、补码和移码
查看>>
SQL存储过程与函数的区别
查看>>
@Resource和@Autowired区别
查看>>
VS2010打开就自动关闭问题解决
查看>>