jQuery跟随鼠标方向出现遮罩层

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tangtang5963/article/details/47297713

鼠标进入和鼠标离开,判断鼠标划入的方向，direction:0上 1右 2下 3左

*{margin:0;padding:0;list-style: none;}
.main{width:922px;margin:0 auto;}
.imgbox li{width:294px;height:267px;margin-left:20px;float:left;position: relative;overflow: hidden}
.slidiv{height:267px;width:294px;background: rgba(9,9,9,0.5);position: absolute;left:-294px;top:0;text-align: center;}

<div class="main">
	<ul class="imgbox">
		<li style="margin-left:0;"><img src="1.jpg"></li>
		<li><img src="2.jpg"></li>
		<li><img src="3.jpg"></li>
	</ul>
</div>

$(function(){
	$(".imgbox li").each(function(){
		$(this).append("<div class=slidiv>shade</div>");
	});
	$(".imgbox li").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;
	   
	   this_slidiv = $(this).find('.slidiv');
	   if(e.type == 'mouseenter'){
	   		switch(direction){
	   			case 0 :
	   				this_slidiv.css({top:-h,left:"0px"});
	   					break;
	   			case 1:
	   				this_slidiv.css({top:"0px",left:w});
	   					break;
	   			case 2:
	   				this_slidiv.css({top:h,left:"0px"});
	   					break;
	   			case 3:
	   				this_slidiv.css({top:"0px",left:-w});
	   					break;
			}
		
				this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast");
				
	   }else if(e.type == 'mouseleave'){
	   		switch(direction){
	   			case 0 :
	   				this_slidiv.stop(true,true).animate({"top":-h},"fast");
	   					break;
	   			case 1:
	   				this_slidiv.stop(true,true).animate({"left":w},"fast");
	   					break;
	   			case 2:
	   				this_slidiv.stop(true,true).animate({"top":h},"fast");
	   					break;
	   			case 3:
	   				this_slidiv.stop(true,true).animate({"left":-w},"fast");
	   					break;
			}		
	   }


	});

});

鼠标从哪个方向划入，遮罩从哪个方向划入，鼠标从哪个方向划出，遮罩层从哪个方向划出。这个特效的重点是，判断鼠标的方向。