JQ鼠标滑过特效

最新推荐文章于 2024-06-01 17:33:11 发布

Sky落羽

最新推荐文章于 2024-06-01 17:33:11 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签： javascript jQuery 前端判断鼠标进入的边

本文链接：https://blog.csdn.net/bluesky466/article/details/41706871

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

从网上找到一个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>