jsdiv鼠标移动事件
想法:鼠标移入区域 div跟着鼠标位置移入鼠标移出时沿着鼠标移出方向移出
难点:
在于如何判断进入和移出事件
如何记录移入移出位置
这里用了π.pI用弧度来求得鼠标的位置
效果
:
可以随着鼠标移进移出并且记录位置
先确定移动的div
注意:
getBoundingClientRect
没有参数
Math.PI
是圆周率π
写当前移动的移入移出事件
Mouseenter
(鼠标移入目标时运行的方法)
Mouseleave
(当鼠标离开目标时运行的方法)
先定义四个变量
定义Bg等于这个div
定义w等于this.offsetWidth等于当前屏幕的宽度
定义h等于this.offsetWidth 等于当前屏幕的高度
定义ToTop等于元素的高度
总过程
:
用jQuery的on事件来判断里面用移入移出事件
π.pI用弧度来求得鼠标的位置
求出当前位置的x轴和y轴
用
Math.round
舍入返回结果
定义进入和退出的方法给过渡动画效果就完成了
过程:
现在有了当前的高度和宽度要求出div的高度和x轴的位置就简单了,
**getBoundingClientRect()**用于获取某个元素相对于视窗的位置集合
.top元素上边到视窗上边的距离;
求到这个后加上滚动条兼容
//pagex是包括被屏幕卷走的长度
求x轴的位置用e.pagex