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

2019-11-20 23:00:21

字體：大中小

供稿：網(wǎng)友

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

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判斷鼠標(biāo)進(jìn)入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;} </style> <div   class="rixfidg"   id="wrap"> 方向反饋 </div> <script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script> <script> $("#wrap").bind("mouseenter mouseleave", function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; var eventType = e.type; var dirName = new Array('上方','右側(cè)','下方','左側(cè)'); if(e.type == 'mouseenter'){ $(this).html(dirName[direction]+'進(jìn)入'); }else{ $(this).html(dirName[direction]+'離開(kāi)'); } }); </script> </body> </html>

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

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

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

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

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

上一篇：JQuery入門(mén)――用one()方法綁定事件處理函數(shù)(僅觸發(fā)一次)

下一篇：jquery 卷簾效果實(shí)現(xiàn)代碼(不同方向)