欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS用斜率判斷鼠標(biāo)進(jìn)入DIV四個(gè)方向的方法

 更新時(shí)間：2016年11月07日 12:00:07   作者：小_前端  
在網(wǎng)上去搜判斷鼠標(biāo)移入div移入移出的方法大同小異，下面小編給大家分享一篇文章關(guān)于js判斷鼠標(biāo)進(jìn)入div方向的代碼，感興趣的朋友一起看看吧

網(wǎng)上大部分判斷鼠標(biāo)移入div移入移出都是使用一下方法：

這個(gè)方法確實(shí)十分奇特，使用起來十分方便。

后來自己看了一些文章，看到有另一種以斜率的方法來判斷鼠標(biāo)的移動(dòng)方向。

上圖是此方法的示意圖，以瀏覽器左上角做原點(diǎn)，水平軸作為x軸，往右為正；豎直軸作為y軸，向上為正。

中間的div的左上角坐標(biāo)（x1,y1）,右下角坐標(biāo)（x2,y2）,中心點(diǎn)的坐標(biāo)（x0,y0）。

設(shè)如圖兩點(diǎn)的斜率為k（k<0），關(guān)于x軸對(duì)稱的斜率為-k。

另外鼠標(biāo)剛移入時(shí)，鼠標(biāo)的坐標(biāo)設(shè)為（x,y）；

window.onload = function(){
var oDiv = document.getElementById('div1');
var x1 = oDiv.offsetLeft,
y1 = -oDiv.offsetTop, //注意坐標(biāo)，所有的y坐標(biāo)都是負(fù)數(shù)
x2 = x1 + oDiv.offsetWidth,
y2 = y1 - oDiv.offsetHeight, //同樣y坐標(biāo)為負(fù)數(shù)
x0 = (x1 + x2) / 2,
y0 = (y1 + y2) / 2;
var k = (y2 - y1) / (x2 - x1); //斜率k
// alert(-k)
oDiv.onmouseover = function(e){
var e = e || window.event;
var x = e.clientX, //鼠標(biāo)剛移入div內(nèi)，記錄下當(dāng)前的x坐標(biāo)
y = -e.clientY; //鼠標(biāo)剛移入div內(nèi)，記錄下當(dāng)前的y坐標(biāo)
var K = (y - y0) / (x - x0); //K是鼠標(biāo)移入點(diǎn)和中心點(diǎn)的斜率
//當(dāng)K大于k并且小于-k時(shí)，則肯定是左右移入，當(dāng)移入點(diǎn)的x坐標(biāo)大于中心點(diǎn) ，則為右移入，小于則是左移入
if(k < K && K < -k){
if(x > x0){
alert('右');
}else{
alert('左');
}
}else{
//注意此處y是負(fù)數(shù)，判斷上下的方法同上
if(y > y0){
alert('上');
}else{
alert('下');
}
}
}
}

首先我們計(jì)算出了斜率k和-k，主要是通過鼠標(biāo)進(jìn)入div的坐標(biāo)和中心點(diǎn)之間的斜率判斷‘左右'或者‘上下'；

通過這張圖可以看出，當(dāng)鼠標(biāo)移入點(diǎn)和中心點(diǎn)的斜率K在 k和-k 之間時(shí)，可以判斷出是左右移入。所以K在其他區(qū)間內(nèi)都是上下移入；

至于怎么分辨左還是右，則就通過移入點(diǎn)的x坐標(biāo)值是否大于中心點(diǎn)的x0值，大于就是右移入，小于就是左移入。

上下的判斷跟左右的原理一樣，不過要注意y坐標(biāo)都是負(fù)的，不可將大小分辨錯(cuò)了。

以上所述是小編給大家介紹的JS用斜率判斷鼠標(biāo)進(jìn)入DIV四個(gè)方向的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論