JS判斷鼠標從什麼方向進入一個容器實例說明

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS判斷鼠標從什麼方向進入一個容器實例說明

編輯：關於JavaScript

偶然將想到的一個如何判斷鼠標從哪個方向進入一個容器的問題。首先想到的是給容器的四個邊添加幾塊，然後看鼠標進入的時候哪個塊先監聽到鼠標事件。不過這樣麻煩太多了。google了一下找到了一個不錯的解決方法，是基於jquery的，說實話，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;這句用到的數學知識我是真沒有看明白，原文中有一些英文注釋我就不一一說明了。代碼部分不是很多，我直接寫了個示例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判斷鼠標進入方向</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"></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> 方向反饋 </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
鼠標移動到上面，可以看到效果。其中返回的direction的值為“0,1,2,3”分別對應著“上，右，下，左”
所以結果值可以switch循環
switch (direction) { case 0: $(this).html('上方進入'); break; case 1: $(this).html('右側進入'); break; case 2: $(this).html('下方進入'); break; case 3: $(this).html('左側進入'); break; }
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
原文代碼是基於jquery的，後面我寫了個原生的js效果，代碼沒有封裝，給需要的朋友。由於firefox等浏覽器不支持mouseenter,mouseleave事件，所以我暫時用mouseover,mouseout代替了，如果大家需要解決冒泡問題的話，還是自行搜索兼容性解決方法吧。
var wrap = document.getElementById('wrap'); var hoverDir = function(e){ var w=wrap.offsetWidth; var h=wrap.offsetHeight; var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y=(e.clientY - wrap.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('上方','右側','下方','左側'); if(e.type == 'mouseover' || e.type == 'mouseenter'){ wrap.innerHTML=dirName[direction]+'進入'; }else{ wrap.innerHTML=dirName[direction]+'離開'; } } if(window.addEventListener){ wrap.addEventListener('mouseover',hoverDir,false); wrap.addEventListener('mouseout',hoverDir,false); }else if(window.attachEvent){ wrap.attachEvent('onmouseenter',hoverDir); wrap.attachEvent('onmouseleave',hoverDir); }
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

關於JavaScript

javascript為按鈕注冊回車事件（設置默認按鈕）的方法: 本文實例講述了javascript為按鈕注冊回車事件（設置默認按鈕）的方法。分享給大家供大家參考。具
js使用心得分享: 本人學習javascript時間也不是很長，目前就如下5點心得，後續慢慢更新。1. 給未經聲明的變量
jquery中實現時間戳與日期相互轉換: 直接看代碼：提醒：不要忘記了引用jquery的類庫(function($) { $.extend(

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章