鼠标事件onmousemove的clientY
2015-11-19 22:41
405 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{height:2000px;} #div1{width: 200px; height: 200px; background: red; position:absolute;} #div2{width:600px; height:1px; background:black; position:absolute; top:643px;} </style> <script> document.onmousemove = function(ev){ var oEvent = ev||event; var oDiv = document.getElementById("div1"); oDiv.style.left = oEvent.clientX + "px"; oDiv.style.top = oEvent.clientY + "px"; } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>
div1跟随鼠标指针移动,但是它的client无法超出可视区域的Y轴长度,再往下移动。
如图:
解决方法:
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取scrollTop滚动距离
oDiv.style.top = oEvent.clientY + scrollTop + "px";//clientY加上滚动距离即可。
相关文章推荐
- python array 类型 转换为 list 类型
- 安装linux jdk错误
- Android Studio1.4.x JNI开发基础 - 简单实例
- cmd
- 瞎玩php——初识cookie和session
- 一个i++的教训,多线程问题
- 慕课网3 异常处理 字符串 Math类 Calendar类 data simpleDateFormat类 包装类
- 《Python基础教程第二版》学习笔记(一)第一章 基础知识
- cvCreateFileCapture返回NULL
- java静态和非静态代码块的执行顺序
- OSX下gif文件动画解析
- DHCP原理及配置
- 理解Swift中Optional类型-有和无的哲学
- 3. Spring 4.2.3前瞻-@Import注解的升级
- 别浪费时间。别浪费时间。别浪费时间
- PHP03
- Java异常分类
- 一个支持下拉自动加载的recycleview
- ext3文件系统反删除利器ext3grep应用实战
- PHP02