jQuery实现感知鼠标滑入方向代码示例搞代码

分享一段代码实例，它实现了感知鼠标方位的功能。

代码实例如下:

<div id="box">
    <div id="box1">蚂蚁部落一</div>
    <div id="box2">蚂蚁部落二</div>
</div>

<style>

#box {

width: 200px;

height: 200px;

border: 1px solid #999;

margin: 200px auto;

position: relative;

zoom: 1;

overflow: hidden;

}

#box1 {

height: 200px;

background-color: orange;

text-align: center;

line-height: 200px;

}

#box2 {

position: absolute;

left: -200px;

top: -200px;

width: 200px;

height: 200px;

background-color: red;

text-align: center;

line-height: 200px;

}

</style>

$(function() {

$("#box").on("mouseenter mouseleave",function(e) {

var w = $(this).width();

var h = $(this).height();

var x=(e.pageX-this.offsetLeft-(w/2))*(w>h?(h/w):1);

var y=(e.pageY-this.offsetTop-(h/2))*(h>w?(w/h):1);

var dirNum=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;

var eventType = e.type;

var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}];

if(eventType == 'mouseenter'){

$("#box2").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200);

}else{

$("#box2").stop(true,true).animate(aPos[dirNum],200);

}

});

</script>

<div id="box1">蚂蚁部落一</div>

<div id="box2">蚂蚁部落二</div>

</div>

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现感知鼠标滑入方向代码示例

Hi，您需要填写昵称和邮箱！