jsdiv鼠标移动事件

  • Post author:
  • Post category:其他



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



版权声明:本文为weixin_54684864原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。