码迷,mamicode.com
首页 > Web开发 > 详细

JS——事件详情(鼠标事件)

时间:2019-06-01 23:09:51      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:top   参考   log   element   scroll   logs   c99   http   效果   

鼠标位置

1》可视区位置:clientX、clientY

跟着鼠标移动的div案例

代码如下图:

 技术图片

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

演示效果如下图:

技术图片

 

但是!!!

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

代码如下图:

技术图片

效果图显示如下:

技术图片

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

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

 

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

技术图片

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

技术图片

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

【跳转自:https://www.cnblogs.com/ytraister/p/10947425.html中的(5)document.documentElement.scrollTop(获取滚动条位置)

 

JS——事件详情(鼠标事件)

标签:top   参考   log   element   scroll   logs   c99   http   效果   

原文地址:https://www.cnblogs.com/ytraister/p/10959867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!