前段时间,偶然看到百度百科里面,有一DIV反转的效果,试了一个居然可以根据鼠标移入移出的方向,进行不同的反转;所以,心里就犯嘀咕,起了疑惑,一个DIV容器如何知道鼠标移入移出方向,进而产生不同的行为:如图所示:
自己试了一下,网上网友说的用4个div紧紧包裹住容器,如下所示:
这中做法在移入,移出的速度过快时,有bug不好用;
最后在一篇博客里面找到了一个比较好的方法:代码如下
$("#wrap").bind("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 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } });
充分利用几何数学实现了这个功能,真心不错;分享给大家,演示代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} </style> <div id="wrap"> 方向反馈 </div> <script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script> $("#wrap").bind("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 direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右侧','下方','左侧'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'进入'); }else{ $(this).html(dirName[direction]+'离开'); } }); </script> </body> </html>
转载于:https://blog.51cto.com/shuizhongyue/1590833