微客导航 » 文章资讯 » js判断鼠标移入移出方向的方法

js判断鼠标移入移出方向的方法

2023-07-22 13:16:13 145

PC端鼠标移入移出的效果很好，这里就给出判断鼠标移入移出的方法，有空再发出带效果的文章，不过授之以鱼不如受之以渔，有了个这个方法，效果不还是soeasy吗？

代码：









*{
padding:0;
margin:0;
}

.ul-box{
width:345px;
margin:20pxauto;
background-color:#f5f5f5;
overflow:auto;
}

.li-item{
width:100%;
height:134px;
margin-bottom:10px;
border-radius:4px;
}

.li-item1{
background:linear-gradient(90deg,#7f90e30%,#8b9bff100%);
}








/**
*@param{Object}event当前事件源信息
*@return{Number}d方向top0right1bottom2left3
*/
functiongetDer(event){
letele=event.target
vard;
varw=ele.offsetWidth,
h=ele.offsetHeight,
l=ele.offsetLeft,
t=ele.offsetTop,
x=(event.clientX-l-w/2)*(w>h?(h/w):1),
y=(event.clientY-t-h/2)*(h>w?(w/h):1);
d=(Math.round((Math.atan2(y,x)*(180/Math.PI)+180)/90)+3)%4;
returnd;
//top0right1bottom2left3
}
/**
*@param{Object}event事件源信息
*@param{Object}type类型leave离开色enter进入
*/
functionderEvent(event,type){
letd=getDer(event)
lettxt=''
switch(d){
case0:
txt='上'
break;
case1:
txt='右'
break;
case2:
txt='下'
break;
case3:
txt='左'
break;
default:
break;
}
if(type==='leave'){
console.log(txt,'离开')
}else{
console.log(txt,'进入')
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

js判断鼠标移入移出方向的方法

热门推荐

随机推荐