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 右下...