js用斜率判斷滑鼠進入div的四個方向

2021-08-13 01:31:19 字數 743 閱讀 2496

網上大部分判斷滑鼠移入div移入移出都是使用一下方法:

這個方法確實十分奇特,使用起來十分方便。

後來自己看了一些文章,看到有另一種以斜率的方法來判斷滑鼠的移動方向。

上圖是此方法的示意圖,以瀏覽器左上角做原點,水平軸作為x軸,往右為正;豎直軸作為y軸,向上為正。

中間的div的左上角座標(x1,y1),右下角座標(x2,y2),中心點的座標(x0,y0)。

設如圖兩點的斜率為k(k<0),關於x軸對稱的斜率為-k。

另外滑鼠剛移入時,滑鼠的座標設為(x,y);

複製** 

window.onload = function()else

}elseelse}}

}複製** 

首先我們計算出了斜率k和-k,主要是通過滑鼠進入div的座標和中心點之間的斜率判斷『左右』或者『上下』; 

通過這張圖可以看出,當滑鼠移入點和中心點的斜率k在 k和-k 之間時,可以判斷出是左右移入。所以k在其他區間內都是上下移入;

至於怎麼分辨左還是右,則就通過移入點的x座標值是否大於中心點的x0值,大於就是右移入,小於就是左移入。

上下的判斷跟左右的原理一樣,不過要注意y座標都是負的不可大小分辨錯了。

js用斜率判斷滑鼠進入div的四個方向

網上大部分判斷滑鼠移入div移入移出都是使用一下方法 這個方法確實十分奇特,使用起來十分方便。後來自己看了一些文章,看到有另一種以斜率的方法來判斷滑鼠的移動方向。上圖是此方法的示意圖,以瀏覽器左上角做原點,水平軸作為x軸,往右為正 豎直軸作為y軸,向上為正。中間的div的左上角座標 x1,y1 右下...

js用斜率判斷滑鼠進入div的四個方向

網上大部分判斷滑鼠移入div移入移出都是使用一下方法 這個方法確實十分奇特,使用起來十分方便。後來自己看了一些文章,看到有另一種以斜率的方法來判斷滑鼠的移動方向。上圖是此方法的示意圖,以瀏覽器左上角做原點,水平軸作為x軸,往右為正 豎直軸作為y軸,向上為正。中間的div的左上角座標 x1,y1 右下...

使用JS製作乙個滑鼠可拖的DIV 滑鼠拖動

使用 js 來實現乙個可拖動的div,主要是使用到以下幾個事件 1.滑鼠按下 div元素的onmousedown。2.滑鼠按住拖動 document 的 onmousemove 元素。3.滑鼠放開 document 的 onmouseup 元素。1.當使用點選要拖動的 div 時,要首先計算出滑鼠的...