JS判斷鼠標從什么方向進入一個容器實例說明
更新時間：2013年02月05日 15:20:49 作者：
偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題,并且做了一系列的設(shè)想，代碼部分不是很多，我直接寫了個示例， 感興趣的朋友可以了解下，或許本文對你有所幫助
偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題。首先想到的是給容器的四個邊添加幾塊，然后看鼠標進入的時候哪個塊先監(jiān)聽到鼠標事件。不過這樣麻煩太多了。google了一下找到了一個不錯的解決方法，是基于jquery的，說實話，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;這句用到的數(shù)學(xué)知識我是真沒有看明白，原文中有一些英文注釋我就不一一說明了。代碼部分不是很多，我直接寫了個示例。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
鼠標移動到上面，可以看到效果。其中返回的direction的值為“0,1,2,3”分別對應(yīng)著“上，右，下，左”
所以結(jié)果值可以switch循環(huán)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
原文代碼是基于jquery的，后面我寫了個原生的js效果，代碼沒有封裝，給需要的朋友。由于firefox等瀏覽器不支持mouseenter,mouseleave事件，所以我暫時用mouseover,mouseout代替了，如果大家需要解決冒泡問題的話，還是自行搜索兼容性解決方法吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼
這篇文章主要介紹了js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼,通過javascript鼠標事件及頁面元素遍歷實現(xiàn)tab切換的功能,非常簡單實用,需要的朋友可以參考下2015-08-08
javascript中 location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL，是BOM中最重要的對象之一，下面我們就來詳細探討下Location對象的使用。2015-05-05
這篇文章主要介紹了萊鳥介紹javascript onclick事件的相關(guān)資料,需要的朋友可以參考下2016-01-01
開發(fā)Chrome擴展時，頁面的popup.html中需要js的時候，直接將JS寫在動態(tài)綁定JS事件會提示錯誤，下面有個不錯的解決方法，大家可以參考下2014-02-02
這篇文章主要介紹了小程序綁定用戶方案優(yōu)化小結(jié)，該類小程序在使用之前就需要綁定用戶信息。常見于線下門店類功能性小程序。具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
下面小編就為大家?guī)硪黄胘s動態(tài)添加html元素,以及屬性的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
設(shè)置選中的行樣式的js代碼，需要的朋友可以參考下，這里只給出了函數(shù)，具體的自己發(fā)揮。2010-05-05
這篇文章主要給大家總結(jié)介紹了關(guān)于利用JS判斷客戶端類型的四種方法，比如通過通過判斷瀏覽器的userAgent、檢查是否是移動端（Mobile）、ipad、iphone、微信、QQ等的方法，需要的朋友可以參考借鑒，下面2017-12-12
這篇文章主要介紹了前端localStorage清除方法的相關(guān)資料,localStorage是前端存儲數(shù)據(jù)的工具,數(shù)據(jù)不會因為頁面刷新而消失,但測試后需要清除數(shù)據(jù),清除localStorage的方法包括手動清除、編程方式清除、使用瀏覽器提供的清除功能和使用第三方庫,需要的朋友可以參考下2024-11-11
在移動web開發(fā)中和pc端不同的是，手機的輸入是軟鍵盤，這樣就會有個問題，那就是當有輸入的時候，鍵盤彈起來，整個頁面難免會發(fā)生變化。怎么解決這個問題呢？下面腳本之家小編給大家分享JS解決移動web開發(fā)手機輸入框彈出的問題2017-03-03