跟随鼠标移动的div框
2015-05-30 22:07
295 查看
事件对象event和传入参数cv解决兼容性问题
event.clientX和event.clientY得到的是相对于页面的坐标,当滚动条向下移动时,则出现定位不准,所以要加上滚动条的高度
event.clientX和event.clientY得到的是相对于页面的坐标,当滚动条向下移动时,则出现定位不准,所以要加上滚动条的高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #div1{width:100px; height:100px; background:#0F0; position:absolute;} </style> <script> function getPos(ev)//将鼠标定位定义成函数 { var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop}; } document.onmousemove=function(ev)//给文档添加移动事件 { var oEvent=ev||event; var oDiv=document.getElementById('div1'); var pos=getPos(oEvent); oDiv.style.left=pos.x+'px';//为left赋值 oDiv.style.top=pos.y+'px'; } </script> </head> <body> <div id="div1"></div> </body> </html>
相关文章推荐
- 我收藏的编译原理相关书籍
- 我收藏的编译原理相关书籍
- Android开源项目SlidingMenu深入剖析
- 五分钟理解一致性哈希算法(consistent hashing)
- 我收藏的编译原理相关书籍
- Raspberry Pi-2 启动自动挂载USB设备
- android gradle初探
- 冒泡排序进阶
- IOS中操作表ActionSheet
- 无废话WCF入门教程五[WCF的通信模式]
- Activity的四种加载模式
- javascript基础
- perl函数substr
- JAVA编码规范
- myBatis的SQL注入问题
- Manacher算法:求解最长回文字符串,时间复杂度为O(N)
- 无废话WCF入门教程三[WCF的宿主]
- 无废话WCF入门教程四[WCF的配置文件]
- C语言高级语法概述笔记
- [MFC]CPen画笔类、CBrush画刷类、背景颜色和背景模式