码迷,mamicode.com
首页 > 其他好文 > 详细

判断鼠标进入容器的方向小Demo

时间:2015-07-24 12:16:01      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:

参考资料:

  贤心博客:http://sentsin.com/web/112.html,

  Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsref_atan2.asp;

Demo: Demo

截图:

技术分享

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title>Document</title>
	<style>
	*{ margin:0;padding:0;}
	#box{ position: absolute;top:200px;left:200px; width:560px;height:560px;border:1px solid #999;padding:10px 0 0 10px; }
	#box div{ position: relative; float:left;width:100px;height: 100px; margin:0 10px 10px 0;border:1px solid #ccc;overflow: hidden;}
	#box div.big-box{ width:324px;}
	#box .mark{ position: absolute;left:-200px;top:-200px;width:100%;height:100%;background-color: #000; opacity: 0.5; border:none; }
	</style>
	<script src="jquery-1.8.3.min.js"></script>
	<script>
		$(function(){

			var $oBox = $(‘#box‘);
			var $aDivs = $oBox.children();
			var $aMarks = $(‘.mark‘);

			$aMarks.on(‘mouseenter‘,function(event){
				event.stopPropagation();
				return false;
			});

			$aDivs.on(‘mouseenter mouseleave‘,function( event ){
				
				var $this = $(this),
					$mark = $this.find(‘.mark‘),
					w = $this.width(),
					h = $this.height(),
					offset = $this.offset(),
					scaleX = w > h ? (h / w) : 1,
		        	scaleY = h > w ? (w / h) : 1,
		        	x = (event.pageX - offset.left - (w / 2)) * scaleX,
		        	y = (event.pageY - offset.top - (h / 2)) * scaleY,
		        	direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
		        	type = event.type;

		        if( direction == 0 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : -h,
							‘left‘ : 0
						});

						$mark.animate({
							‘top‘ : 0
						},300);

					}else{
						
						$mark.animate({
							‘top‘ : -h
						},300);

					}

				}else if( direction == 1 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : 0,
							‘left‘ : w
						});

						$mark.animate({
							‘left‘ : 0
						},300);

					}else{

						$mark.animate({
							‘left‘ : w
						},300);

					}

				}else if( direction == 2 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : h,
							‘left‘ : 0
						});

						$mark.animate({
							‘top‘ : 0
						},300);

					}else{

						$mark.animate({
							‘top‘ : h
						},300);

					}

				}else if( direction == 3 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : 0,
							‘left‘ : -w
						});

						$mark.animate({
							‘left‘ : 0
						},300);

					}else{

						$mark.animate({
							‘left‘ : -w
						},300);

					}
				
				}else{

					$mark.css({
						‘top‘  : 0,
						‘left‘ : 0
					});

				}

			});

		});
	</script>
</head>
<body>
	
	<div id="box">

		<div >
			<a href="#" class="mark"></a>
		</div>
		<div class="big-box">
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div class="big-box">
			<a href="#" class="mark"></a>
		</div>
	
	</div>


</body>
</html>

  

后记:

其实核心的代码都是用贤心博客里的代码,讲解的也比较清楚。

1.要知道父级容器有正方形和长方形所以要算一个比例关系,求出x,y的值;

2.Math.atan2(y, x) 返回从 x 轴到点 (x,y) 之间的角度 其实返回的是弧度然后在* 180 / Math.PI 转成角度;

3.至于+ 180) / 90) + 3) % 4  +180 是为了角度的反转,除90是平均分成四份 +3其实为了%4求出0,1,2,3;

大概的逻辑是这样,可以也有个人理解不对的方法,欢迎指出;

 

判断鼠标进入容器的方向小Demo

标签:

原文地址:http://www.cnblogs.com/auok/p/4672688.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!