ボックスマウスの移動方向の判断

	
		
		
		
	

	
		

			

				1
			
		
		


			

				2
			
		
		


			

				3
			
		
		


			

				4
			
		
		
		
			//               
			var MouseDirection = function(element, opts) {

				var $element = $(element);

				//enter leave            
				opts = $.extend({}, {
					enter: $.noop,
					leave: $.noop
				}, opts || {});

				var dirs = ['top', 'right', 'bottom', 'left'];

				var calculate = function(element, e) {
					/*                 */

					//               
					var x1, y1, x4, y4, x0, y0;

					//               
					var k;

					// getBoundingClientRect    ，          
					var rect = element.getBoundingClientRect();

					if(!rect.width) {
						rect.width = rect.right - rect.left;
					}

					if(!rect.height) {
						rect.height = rect.bottom - rect.top;
					}

					//         y         ，             (0,0)，            
					x1 = rect.left;
					y1 = -rect.top;

					x4 = rect.left + rect.width;
					y4 = -(rect.top + rect.height);

					x0 = rect.left + rect.width / 2;
					y0 = -(rect.top + rect.height / 2);

					//     ，   
					if(Math.abs(x1 - x4) < 0.0001) return 4;

					//       
					k = (y1 - y4) / (x1 - x4);

					var range = [k, -k];

					//            
					var x, y;

					x = e.clientX;
					y = -e.clientY;

					//                     
					var kk;

					kk = (y - y0) / (x - x0);

					//     range   ，              
					if(isFinite(kk) && range[0] < kk && kk < range[1]) {
						//  x x0    
						return x > x0 ? 1 : 3;
					} else {
						//  y y0    
						return y > y0 ? 0 : 2;
					}
				};

				$element.on('mouseenter', function(e) {
					var r = calculate(this, e);
					opts.enter($element, dirs[r]);
				}).on('mouseleave', function(e) {
					var r = calculate(this, e);
					opts.leave($element, dirs[r]);
				});
			};
		
		
			var DIR_POS = {
				left: {
					top: '0',
					left: '-100%'
				},
				right: {
					top: '0',
					left: '100%'
				},
				bottom: {
					top: '100%',
					left: '0'
				},
				top: {
					top: '-100%',
					left: '0'
				}
			};

			$('.box').each(function() {
				new MouseDirection(this, {
					enter: function($element, dir) {
						//       .trans    ，                  
						var $content = $element.find('.content').removeClass('trans');

						//    
						$content.css(DIR_POS[dir]);

						//reflow
						$content[0].offsetWidth;

						//    
						$content.addClass('trans');

						//  
						$content.css({
							left: '0',
							top: '0'
						});
					},
					leave: function($element, dir) {
						$element.find('.content').css(DIR_POS[dir]);
					}
				});
			});