利用JS判斷鼠標(biāo)移入元素的方向
最終效果
這里的關(guān)鍵主要是判斷鼠標(biāo)是從哪個(gè)方向進(jìn)入和離開的
$("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect().top - h/2; var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值為“0,1,2,3”分別對應(yīng)著“上,右,下,左” var eventType = e.type; var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ; $('.line').css('transform','rotate('+ res +'deg)'); // console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180)); // console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4); var dirName = new Array('上方','右側(cè)','下方','左側(cè)'); $('.res').text(res + 'deg'); if(eventType == 'mouseenter'){ $('.res').text(dirName[direction]+'進(jìn)入'); animationIn(direction); }else{ $('.res').text(dirName[direction]+'離開'); animationOut(direction); } });
上面代碼的重點(diǎn)主要是在direction的值的計(jì)算
Math.atan2(y,x) 返回-PI 到 PI 之間的值(負(fù)180°到正180°),是從 X 軸正向逆時(shí)針旋轉(zhuǎn)到點(diǎn) (x,y) 時(shí)經(jīng)過的角度 這里的結(jié)果是一個(gè)弧度值。那如何把這個(gè)值轉(zhuǎn)換為角度呢
我們可以先算出一個(gè)角度的弧度值(Math.PI / 180) ,然后用上面計(jì)算出來的結(jié)果除以一度的弧度值
從上圖可以看出,當(dāng)鼠標(biāo)從右邊進(jìn)入的時(shí)候,角度是在-45°~45°之間的 底部是45~135 左邊135~180&-180~-135 頂部是 -135 ~ -45
因?yàn)樯厦嬗?jì)算出來的結(jié)果不符合我們的習(xí)慣,并且負(fù)值在計(jì)算的時(shí)候會影響正確性,現(xiàn)在我們給這個(gè)結(jié)果加上180 讓角度范圍變成我們習(xí)慣的0~360°。當(dāng)加上180之后 0°的位置就在左邊的中間了
0度的位置
所以現(xiàn)在的范圍變成了
0~44 & 360~315 左邊
45~134 上邊
135~224 右邊
225~314 下邊
我們再繼續(xù)轉(zhuǎn)換,現(xiàn)在我們把算出來的角度除以90,然后四舍五入,可以使得45°為分界線
上邊算出來的結(jié)果為1
上邊
右邊算出來的結(jié)果為2
右邊
下邊算出來的結(jié)果為3
下邊
左邊算出來的結(jié)果有兩種 0~44肯定是為0的 315~360 為4
左邊
現(xiàn)在算出來的結(jié)果一共有5個(gè)值(左邊2個(gè),其他三個(gè)面各一個(gè))。下面我們再精簡一下結(jié)果,我們給每次的結(jié)果都加上3,然后和4取余
左邊加3之后就是3和7,然后取余后為3
上邊加3之后為4,取余后為0
右邊加3為5,取余為1
下邊加3為6,取余為2
我們最終的結(jié)果就是 0->上邊 1->右邊 2->下邊 3->左邊 然后我們通過控制left和top就可以實(shí)現(xiàn)上面的效果了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } ul { list-style: none; position: relative; width: 600px; width: 100%; } ul> li { margin: 50px auto; position: relative; width: 300px; height: 300px; background-color: black; overflow: hidden; } ul> li .bg { position: absolute; width: 300px; height: 300px; left: -100%; top: 0; background-color: red; text-align: center; line-height: 300px; color: blue; font-size: 150px; } .line { position: absolute; width: 50%; height: 1px; background: red; right: 0; top: 50%; transition: all .3s; transform-origin: left; } .res { text-align: center; } </style> </head> <body> <ul> <li> <div class="bg"> SB </div> </li> </ul> <div class="res"></div> <script src="js/jquery-3.1.1.js"></script> <script> $("li").on("mouseenter mouseleave", function(e) { var $bg = $(this).find('.bg'); var w = this.offsetWidth; //獲取元素寬度 var h = this.offsetHeight; //獲取元素高度 var toTop = this.getBoundingClientRect().top + document.body.scrollTop; //兼容滾動條 var x = e.pageX - this.getBoundingClientRect().left - w / 2; //獲取當(dāng)前鼠標(biāo)的x軸位置(相對于這個(gè)li的中心點(diǎn)) var y = e.pageY - toTop - h / 2; ////獲取當(dāng)前鼠標(biāo)的y軸位置(相對于這個(gè)li的中心點(diǎn)) var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值為“0,1,2,3”分別對應(yīng)著“上,右,下,左” var eventType = e.type; var res = Math.atan2(y, x) / (Math.PI / 180) + 180; $('.line').css('transform', 'rotate(' + res + 'deg)'); var dirName = new Array('上方', '右側(cè)', '下方', '左側(cè)'); if(eventType == 'mouseenter') { $('.res').text(dirName[direction] + '進(jìn)入'); animationIn(direction, $bg); } else { $('.res').text(dirName[direction] + '離開'); animationOut(direction, $bg); } }); function animationIn(direction, ele) { switch(direction) { case 0: ele.css({ left: 0, top: '-100%' }).animate({ top: 0 }, 300); break; case 1: ele.css({ left: '100%', top: 0 }).animate({ left: 0 }, 300); break; case 2: ele.css({ left: 0, top: '100%' }).animate({ top: 0 }, 300); break; case 3: ele.css({ left: '-100%', top: 0 }).animate({ left: 0 }, 300); break; } } function animationOut(direction, ele) { switch(direction) { case 0: ele.animate({ top: '-100%' }, 300); break; case 1: ele.animate({ left: '100%' }, 300); break; case 2: ele.animate({ top: '100%' }, 300); break; case 3: ele.animate({ left: '-100%' }, 300); break; } } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能
uni-app 是使用vue的語法+小程序的標(biāo)簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢,下面這篇文章主要給大家介紹了關(guān)于如何基于uni-app實(shí)現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關(guān)資料,需要的朋友可以參考下2022-09-09所見即所得的富文本編輯器bootstrap-wysiwyg使用方法詳解
這篇文章主要為大家分享一款所見即所得的富文本編輯器bootstrap-wysiwyg,并詳細(xì)告訴大家文本編輯器bootstrap-wysiwyg的使用方法,感興趣的小伙伴們可以參考一下2016-05-05JavaScript Ajax實(shí)現(xiàn)異步通信
這篇文章主要為大家詳細(xì)介紹了JavaScript Ajax實(shí)現(xiàn)異步通信的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js報(bào)錯(cuò) Object doesn''t support this property or method的原因分析
運(yùn)行js是出現(xiàn)Object doesn't support this property or method 錯(cuò)誤的可能原因分析。2011-03-03