js判斷滑鼠移入移出方向

最後更新：2014-12-17 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：js判斷滑鼠移入移出方向

前段時間，偶然看到百度百科裡面，有一DIV反轉的效果，試了一個居然可以根據滑鼠移入移出的方向，進行不同的反轉；所以，心裡就犯嘀咕，起了疑惑，一個DIV容器如何知道滑鼠移入移出方向，進而產生不同的行為：：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M00/57/11/wKiom1SQM_ij7OKoAACdS-1LWU8037.jpg" title="映像 3.jpg" alt="wKiom1SQM_ij7OKoAACdS-1LWU8037.jpg" />

自己試了一下，網上網友說的用4個div緊緊包裹住容器，如下所示：

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/57/0E/wKioL1SQNTyhr9j0AACzkXHoPSo816.jpg" title="mouse002.jpg" alt="wKioL1SQNTyhr9j0AACzkXHoPSo816.jpg" />

這中做法在移入，移出的速度過快時，有bug不好用；

最後在一篇部落格裡面找到了一個比較好的方法：代碼如下

$("#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(‘上方‘,‘右側‘,‘下方‘,‘左側‘);

if(e.type == ‘mouseenter‘){

$(this).html(dirName[direction]+‘進入‘);

}else{

$(this).html(dirName[direction]+‘離開‘);

}

});

充分利用幾何數學實現了這個功能，真心不錯；分享給大家，示範代碼如下：

<!DOCTYPE html>

<html>

<head>

<title>判斷滑鼠進入方向</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>

$("#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(‘上方‘,‘右側‘,‘下方‘,‘左側‘);

if(e.type == ‘mouseenter‘){

$(this).html(dirName[direction]+‘進入‘);

}else{

$(this).html(dirName[direction]+‘離開‘);

}

});

</script>

</body>

</html>

本文出自 “7439523” 部落格，請務必保留此出處http://7449523.blog.51cto.com/7439523/1590833

js判斷滑鼠移入移出方向

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More