jQuery实现感知鼠标滑入方向代码示例
分享一段代码实例,它实现了感知鼠标方位的功能。
代码实例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<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> <script> $(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="box"> <div id="box1">蚂蚁部落一</div> <div id="box2">蚂蚁部落二</div> </div> |
原创文章,转载请注明: 转载自搞代码
本文链接地址: jQuery实现感知鼠标滑入方向代码示例

微信 赏一包辣条吧~

支付宝 赏一听可乐吧~
发表评论