JQ鼠标滑过特效

来源：互联网发布：beta软件计划编辑：程序博客网时间：2024/05/20 03:04

从网上找到一个JQ判断鼠标从什么方向进入一个div的代码,不过没有注释，一眼看上去可能有点难理解，于是我就写了一个分析帮助理解

代码：

<!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>

分析：

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);

求出鼠标划入点在如下坐标系中的坐标（以div为原点，右方为x轴正方向，下方为y轴正方向）

这里的 * (w > h ? (h / w) : 1);和 * (h > w ? (w / h) : 1);就是将x，y坐标按比例调整到一个正方形div的坐标系中的坐标

于是可以求与x轴正方形的夹角

这个夹角的大小是从-180°到180°,就是下面这个样子：

将其偏移到0°到360°：Math.atan2(y, x) * (180 / Math.PI)) + 180
就是相当于与x轴负方向的夹角：

除以90°再四舍五入取整：
Math.round(((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90)
这样得到的0到3就可以表示鼠标是从哪条边进去的：

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

加3再对4取余将序号偏移成这样

于是就可以在数组里面得到是从哪条边进入的：

var dirName = new Array('上方','右侧','下方','左侧');

这个东西有什么用？大家有没有看过一种鼠标滑过的效果：

根据鼠标划入的方向，让一个说明遮罩层从那个方向划入。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>判断鼠标进入方向</title><script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script><script>$(function () {$(".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 ori = new Array({"margin":"-100% 0 0 0"},{"margin":"0 0 0 100%"},{"margin":"100% 0 0 0"},{"margin":"0 0 0 -100%"});var aniIn  = new Array({"margin-top":"0"},{"margin-left":"0"},{"margin-top":"0"},{"margin-left":"0"});var aniOut = new Array({"margin-top":"-100%"},{"margin-left":"100%"},{"margin-top":"100%"},{"margin-left":"-100%"});if(e.type == 'mouseenter'){var skill = $(this).find(".tip");skill.stop(true);skill.css(ori[direction]);skill.animate(aniIn[direction]);}else{$(this).find(".tip").animate(aniOut[direction]);}});});</script></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;position: relative;overflow: hidden;}.tip{width:300px;height:300px;background-color: #000;opacity: 0.5;margin-top: 300px;color: #f00;}</style><div class="wrap"> <div class="tip">说明</div></div></body></html>

0 0