JS判斷鼠標從什么方向進入一個容器實例說明
更新時間：2013年02月05日 15:20:49 作者：
偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題,并且做了一系列的設想，代碼部分不是很多，我直接寫了個示例， 感興趣的朋友可以了解下，或許本文對你有所幫助
偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題。首先想到的是給容器的四個邊添加幾塊，然后看鼠標進入的時候哪個塊先監(jiān)聽到鼠標事件。不過這樣麻煩太多了。google了一下找到了一個不錯的解決方法，是基于jquery的，說實話，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;這句用到的數(shù)學知識我是真沒有看明白，原文中有一些英文注釋我就不一一說明了。代碼部分不是很多，我直接寫了個示例。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
鼠標移動到上面，可以看到效果。其中返回的direction的值為“0,1,2,3”分別對應著“上，右，下，左”
所以結(jié)果值可以switch循環(huán)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
原文代碼是基于jquery的，后面我寫了個原生的js效果，代碼沒有封裝，給需要的朋友。由于firefox等瀏覽器不支持mouseenter,mouseleave事件，所以我暫時用mouseover,mouseout代替了，如果大家需要解決冒泡問題的話，還是自行搜索兼容性解決方法吧。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
這篇文章主要介紹了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細的分析了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細介紹了微信小程序手動添加收貨地址省市區(qū)聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
基于javascript實現(xiàn)貪吃蛇經(jīng)典小游戲
這篇文章主要為大家詳細介紹了JS實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
非?？岬膉avascript拖動分頁功能，無縫循環(huán)分頁，拖動鼠標即可完成分頁，鼠標向左拖動回到前一頁，向右拖動則翻開第二頁，還帶有動畫特效，著實很不錯，界面黑色，非主流風格，相信很多人會喜歡的。2015-05-05
這篇文章主要介紹了微信小程序自定義組件封裝及父子間組件傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
JS實時彈出新消息提示框并有提示音響起的實現(xiàn)代碼
本文給大家介紹JS實時彈出新消息提示框并有提示音響起的實現(xiàn)代碼，實現(xiàn)過程除了使用及時的推送技術(shù)外還使用ajax實現(xiàn)此功能，對js提示框提示音響起的相關(guān)知識感興趣的朋友一起學習吧2016-04-04
微信小程序scroll-view實現(xiàn)橫向滾動和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實現(xiàn)橫向滾動和上拉加載示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
這篇文章主要介紹了JS+CSS實現(xiàn)閃爍字體效果代碼,可實現(xiàn)文字按照指定顏色逐次閃爍顯示的功能,代碼非常簡單實用,需要的朋友可以參考下2016-04-04
這篇文章主要介紹了JavaScript簡單下拉菜單,采用JavaScript定時函數(shù)遞歸調(diào)用實現(xiàn)菜單漸顯效果,非常簡單實用,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細介紹了vue/js實現(xiàn)頁面自動往上滑動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04