鼠标移动方向插件源码分享

<!doctype html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Demo</title>
  <style>
	*{margin:0;padding:0;}
	ul,li{list-style:none;}
	div{font-family:"Microsoft YaHei";}
	html,body{width:100%; height:100%; background:#f2f2f2;}
	ul{margin-left:50px;}
	ul li{float:left;}
	ul li .outer{width:300px; height:250px;}
	ul li .outer .inner{width:300px; height:250px; background:rgba(0, 0, 0, .3);}
  </style>
	<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
 </head>
 <body>
	<ul>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
		<li>
			<div class="outer">
				<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
				<div class="inner">
					这是描述。。。
				</div>
			</div>
		</li>
	</ul>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script>
		;(function($){
			$.fn.extend({
				show : function(div){
					var w = this.width(),
						h = this.height(),
						xpos = w/2,
						ypos = h/2,
						eventType = "",
						direct = "";
					this.css({"overflow" : "hidden", "position" : "relative"});
					div.css({"position" : "absolute", "top" : this.width()});
					this.on("mouseenter mouseleave", function(e){
						var oe = e || event;
						var x = oe.offsetX;
						var y = oe.offsetY;
						var angle = Math.atan((x - xpos)/(y - ypos)) * 180 / Math.PI;
						if(angle > -45 && angle < 45 && y > ypos){
							direct = "down";
						}
						if(angle > -45 && angle < 45 && y < ypos){
							direct = "up";
						}
						if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x > xpos){
							direct = "right";
						}
						if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x < xpos){
							direct = "left";
						}
						move(e.type, direct)
					});
					function move(eventType, direct){
						if(eventType == "mouseenter"){
							switch(direct){
								case "down":
									div.css({"left": "0px", "top": h}).stop(true,true).animate({"top": "0px"}, "fast");	
									break;
								case "up":
									div.css({"left": "0px", "top": -h}).stop(true,true).animate({"top": "0px"}, "fast");	
									break;
								case "right":
									div.css({"left": w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");	
									break;
								case "left":
									div.css({"left": -w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");	
									break;
							}
						}else{
							switch(direct){
								case "down":
									div.stop(true,true).animate({"top": h}, "fast");	
									break;
								case "up":
									div.stop(true,true).animate({"top": -h}, "fast");	
									break;
								case "right":
									div.stop(true,true).animate({"left": w}, "fast");	
									break;
								case "left":
									div.stop(true,true).animate({"left": -w}, "fast");	
									break;
							}
						}
					}
				}
			});
		})(jQuery)
		
	</script>
<script>
		$(".outer").each(function(i){
			$(this).show($(".inner").eq(i));
		});
</script>
 </body>
</html>