div跟随鼠标移动
2024-08-31 12:47:51
1、目标是实现div跟随鼠标而移动,分三种情况进行实现
a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能
第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法。
1)获取鼠标的坐标,进行给div坐标赋值,实现如下:
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top +"px";
第二种方式,假如body的高度大于可见高度,则会出现滚动条,clientXY获取的是可见的大小,则多余的部分则无法实现移动,则需要使用下面的方式实现
但是这种方式不兼容IE8,所以如果要兼容IE8,则不能使用。pageX是获取整个页面的大小
var left = event.pageX;
var top = event.pageY;
第三种方式是什么都可以兼容的,涵盖上面两种方式的可行度,就是用可见窗口的加上滚动条的高度即可
var st = document.body.scrollTop || document.documentElement.scrollTop;
var left = event.clientX;
var top = event.clientY;
box1.style.left = left + "px";
box1.style.top = top + st+"px";
注,left轴也一样,我这里只是实现了y轴
最新文章
- css代码优化
- 查询数组里有多少个数在[L,R]范围中(二分)
- SQL Server 2008 FILESTREAM特性管理文件
- 【原创】pads2007 Layout 电气连接性检查过孔显示错误
- 创建可执行的JAR包
- ASP.NET获取URL
- P1654: [Usaco2006 Jan]The Cow Prom 奶牛舞会
- Java Annotation 必须掌握的特性
- JQuery>;>;>;get/post赋值全局变量
- AeroSpike 记录
- Ubuntu安装完后设置root密码
- 关于ionic开发的一些总结(项目启动设置,app图标名称更改)
- java基础06 Java中的递归
- [Swift]LeetCode850. 矩形面积 II | Rectangle Area II
- NFS 安装与配置
- spring(aop面向切面编程)
- QT应用在windows和Linux平台的发布指南
- Java多线程中wait语句的具体使用技巧
- mem 0908
- python操作txt文件中数据教程[4]-python去掉txt文件行尾换行