思路詳解
1. 把元素框分成如下四部分：
只要能判斷出鼠標移入移出時屬於哪個部分的范圍內，問題即可解決。而這個判斷可通過斜率，結合鼠標的位置與元素框中心點的位置比較得出。這個判斷原理，采用下面的坐標系圖解來說明。
2. 解決這個問題，建立如下圖坐標系：
1）上圖以瀏覽器可視區域左上角為原點建立坐標系，坐標系與數學坐標系方向一致，往右表示x軸正方向，往下表示y軸負方向；
2）圖中點(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心點，（x,y）表示鼠標移入移出時與元素框的邊的交點；
3）根據下面的公式：
可得(x1,y1)與（x4,y4)這條對角線的斜率為 k = (y1-y4)/(x1-x4)。由於對稱性，元素框另外一條對角線的斜率一定是 -k。
同時由於(x1,y1)與（x4,y4)這條對角線在坐標系中一定經過的是第二和第四象限，所以k肯定是負值，而 -k一定是正值。
4）根據同樣的公式，當鼠標移入移出時的瞬間，與元素邊框的交點與元素框中心點的斜率 k1 = (y-y0)/(x-x0)。
5）由圖可知，當 k < k1 < –k時，鼠標一定是從元素的左右方向移動的；反之，一定是從上下方向移動的。
當鼠標是從左右方向移動時，如果x > x0，那么鼠標就是從右邊移動的，反之就是從左邊移動的；
當鼠標是從上下方向移動時，如果y > y0時，那么鼠標就是從上邊移動的，反之就是從下邊移動的。
注意：坐標系中所有的y值都是負的。
以上便是這個問題，我提供的解決思路，通過上面的圖解說明，相信大家理解起來會比較容易。如果查看我提供的代碼實現demo1.js，會發現代碼的邏輯，跟上面的圖解說明也是一致的。當然這個思路只是解決如何判斷鼠標移入移出的方向問題，demo中的效果實現最后還得要借助css 過渡才行，不過這個部分就更簡單了，詳細代碼可見demo1.html的源碼，邏輯非常簡單，這里就不再詳細說明了。
demo代碼如下
<!DOCTYPE html> <!-- saved from url=(0060)http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html --> <html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>鼠標移入移出方向判斷</title> <style> body, html, ul, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } ul { list-style: none; } body { padding-top: 100px; text-align: center; } .box { width: 300px; height: 200px; margin: 10px auto; border: 1px solid #ccc; position: relative; overflow: hidden; display: inline-block; } .content { position: absolute; z-index: 2; background-color: lightcoral; width: 100%; height: 100%; left: -100%; top: -100%; line-height: 198px; text-align: center; color: #fff; font-size: 70px; } .content.trans { transition: all .2s; backface-visibility: hidden; } </style> </head> <body> <div class="box"> <div class="content trans" style="top: 0px; left: -100%;"> 1 </div> </div><div class="box"> <div class="content trans" style="top: 0px; left: -100%;"> 2 </div> </div><div class="box"> <div class="content trans" style="top: 0px; left: -100%;"> 3 </div> </div><div class="box"> <div class="content trans" style="top: 0px; left: -100%;"> 4 </div> </div> <script src="jquery.js"></script> <script src="demo1.js"></script> <script> 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]); } }); }); </script> </body></html>
demo1.js代碼如下
//這個模塊完成鼠標方向判斷的功能 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]); }); };