判斷滑鼠從哪個方向進入盒子

2021-09-22 19:37:32 字數 1069 閱讀 2334

var x = e.offsetx - elem.spec.x/2;//滑鼠進入的x座標-盒子寬度的一半

var y = e.offsety - elem.spec.y/2;//滑鼠進入的y座標-盒子寬度的一半

var direction = (math.round((math.atan2(y, x) * (180/math.pi) + 180)/90) + 3)%4;

direction=0 從top進入

direction=1 從right進入

direction=2 從bottom進入

direction=3 從left進入

下面解釋一下每一步

預設情況下,盒子的原點在左上角位置o,為了方便計算滑鼠進入的角度值,可以用滑鼠的進入位置的x,y減去盒子的width,height,這樣就把原點轉換為o',即為盒子的中心,鑑於負數不容易計算,可以全部叫上180度;從圖中可以看出

top的角度範圍是 45 ~ 135;

right的角度範圍是 135 ~ 225;

bottom的角度範圍是 225 ~ -315;

left的角度範圍是 315 ~ 360 0 ~ 45 ;

除以90之後

top的範圍變為 0.5 ~ 1.5

right的範圍變為 1.5 ~ 2.5

bottom的範圍變為 2.5 ~ 3.5

left的範圍變為 3.5 ~ 4   0 ~ 0.5

如果對結果四捨五入處理,那麼

在top進入的值將是 1

在right進入的值將是 2

在bottom進入的值將是 3

在left進入的值將是 4 或者 0

那麼 + 3取餘4之後就變成

在top進入的值將是 0

在right進入的值將是 1

在bottom進入的值將是 2

在left進入的值將是 3

可以發現每個方向都有有唯一的值,後面判斷的時候就可以直接使用

滑鼠和滾輪方向判斷

1.滑鼠進入方向判斷 lang en charset utf 8 documenttitle rel stylesheet href head id a style width 200px height 200px margin 100px auto background 06c body docu...

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

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

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

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