快捷導(dǎo)航

JS判斷鼠標(biāo)從什么方向進(jìn)入一個(gè)容器實(shí)例說明

更新時(shí)間：2013年02月05日 15:20:49 作者：

偶然將想到的一個(gè)如何判斷鼠標(biāo)從哪個(gè)方向進(jìn)入一個(gè)容器的問題,并且做了一系列的設(shè)想，代碼部分不是很多，我直接寫了個(gè)示例，感興趣的朋友可以了解下，或許本文對你有所幫助

偶然將想到的一個(gè)如何判斷鼠標(biāo)從哪個(gè)方向進(jìn)入一個(gè)容器的問題。首先想到的是給容器的四個(gè)邊添加幾塊，然后看鼠標(biāo)進(jìn)入的時(shí)候哪個(gè)塊先監(jiān)聽到鼠標(biāo)事件。不過這樣麻煩太多了。google了一下找到了一個(gè)不錯(cuò)的解決方法，是基于jquery的，說實(shí)話，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;這句用到的數(shù)學(xué)知識(shí)我是真沒有看明白，原文中有一些英文注釋我就不一一說明了。代碼部分不是很多，我直接寫了個(gè)示例。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

鼠標(biāo)移動(dòng)到上面，可以看到效果。其中返回的direction的值為“0,1,2,3”分別對應(yīng)著“上，右，下，左”
所以結(jié)果值可以switch循環(huán)

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

原文代碼是基于jquery的，后面我寫了個(gè)原生的js效果，代碼沒有封裝，給需要的朋友。由于firefox等瀏覽器不支持mouseenter,mouseleave事件，所以我暫時(shí)用mouseover,mouseout代替了，如果大家需要解決冒泡問題的話，還是自行搜索兼容性解決方法吧。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法
這篇文章主要介紹了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細(xì)的分析了Js實(shí)現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實(shí)現(xiàn)方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2014-10-10
微信小程序手動(dòng)添加收貨地址省市區(qū)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序手動(dòng)添加收貨地址省市區(qū)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
基于javascript實(shí)現(xiàn)貪吃蛇經(jīng)典小游戲
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁
非常酷的javascript拖動(dòng)分頁功能，無縫循環(huán)分頁，拖動(dòng)鼠標(biāo)即可完成分頁，鼠標(biāo)向左拖動(dòng)回到前一頁，向右拖動(dòng)則翻開第二頁，還帶有動(dòng)畫特效，著實(shí)很不錯(cuò)，界面黑色，非主流風(fēng)格，相信很多人會(huì)喜歡的。
2015-05-05
微信小程序自定義組件封裝及父子間組件傳值的方法
這篇文章主要介紹了微信小程序自定義組件封裝及父子間組件傳值的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
JS實(shí)時(shí)彈出新消息提示框并有提示音響起的實(shí)現(xiàn)代碼
本文給大家介紹JS實(shí)時(shí)彈出新消息提示框并有提示音響起的實(shí)現(xiàn)代碼，實(shí)現(xiàn)過程除了使用及時(shí)的推送技術(shù)外還使用ajax實(shí)現(xiàn)此功能，對js提示框提示音響起的相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例
本篇文章主要介紹了微信小程序scroll-view實(shí)現(xiàn)橫向滾動(dòng)和上拉加載示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-03-03
JS+CSS實(shí)現(xiàn)閃爍字體效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)閃爍字體效果代碼,可實(shí)現(xiàn)文字按照指定顏色逐次閃爍顯示的功能,代碼非常簡單實(shí)用,需要的朋友可以參考下
2016-04-04
JavaScript簡單下拉菜單實(shí)例代碼
這篇文章主要介紹了JavaScript簡單下拉菜單,采用JavaScript定時(shí)函數(shù)遞歸調(diào)用實(shí)現(xiàn)菜單漸顯效果,非常簡單實(shí)用,需要的朋友可以參考下
2015-09-09
vue/js實(shí)現(xiàn)頁面自動(dòng)往上滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue/js實(shí)現(xiàn)頁面自動(dòng)往上滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04