js视线鼠标悬浮动画 最后更新时间：2022年10月16日 基本思路是监听鼠标位置和dom元素的位置，通过判断鼠标的位置是否与dom元素的位置重叠，来实现相应的效果。 ```javascript /* 鼠标特效代码 */ // 获取dom坐标 function XY(dom){ let Top = dom.offsetTop; let maxTop = dom.offsetTop+dom.offsetHeight; let Left = dom.offsetLeft; let maxLeft = dom.offsetLeft+dom.offsetWidth; let y = [Top,maxTop] let x = [Left,maxLeft]; return [x,y]; } // 获取鼠标坐标 function mouseXY(event) { let e = event || window.event; let z = [e.clientX,e.clientY]; return z } // 鼠标悬停menu上的效果 function menuFloatOver() { let menu = document.getElementById("menu"); menu.style.width = "132px"; menu.style.left = "calc(100% - 142px)"; let menuMuds = document.getElementsByClassName("menuMud"); let menuMud_warning = document.getElementById("menuMud_warning"); try { menuMud_warning.style.display = "block"; }catch(e){} for (let i = 0; i < menuMuds.length; i++){ menuMuds[i].style.display = "flex"; } } // 鼠标离开menu上的效果 function menuFloatOur() { let menu = document.getElementById("menu"); menu.style.width = "10px"; menu.style.left = "calc(100% - 20px)"; let menuMuds = document.getElementsByClassName("menuMud"); let menuMud_warning = document.getElementById("menuMud_warning"); try { menuMud_warning.style.display = "none"; }catch(e){} for (let i = 0; i < menuMuds.length; i++){ menuMuds[i].style.display = "none"; } } // 鼠标悬停在search框上的效果 function searchFloatOver(){ let search = document.getElementById("search"); search.style.transform = "scale(1.2,1.2)" search.style.backgroundColor = "rgb(255, 255, 255,0.8)" search.style.boxShadow = "0px 2px 6px rgba(255, 255, 255, 0.6)" } // 鼠标离开search框上的效果 function searchFloatOur(){ let search = document.getElementById("search"); search.style.transform = "scale(1,1)" search.style.backgroundColor = "rgb(255, 255, 255,0.6)" search.style.boxShadow = "0px 2px 6px rgba(255, 255, 255, 0)" } // 鼠标悬停的核心 function FloatCore(mouseXY,XY,FloatOver,FloatOur){ let X = XY[0] let Y = XY[1] let Xmin = X[0] let Xmax = X[1] let Ymin = Y[0] let Ymax = Y[1] let mouseX = mouseXY[0] let mouseY = mouseXY[1] if (mouseX >= Xmin && mouseX <= Xmax && mouseY >= Ymin && mouseY <= Ymax){ FloatOver() }else { FloatOur() } } // 鼠标悬停程序 function floatXY(event) { let mouse_xy = mouseXY(event); // 获取menu坐标 let menu = document.getElementById('menu'); let menuXY = XY(menu) // 获取search坐标 let search = document.getElementById('search'); let searchXY = XY(search) FloatCore(mouse_xy,menuXY,menuFloatOver,menuFloatOur) // 鼠标在menu上悬停 FloatCore(mouse_xy,searchXY,searchFloatOver,searchFloatOur) // 鼠标在search上悬停 } document.addEventListener("mousemove",floatXY); /* end */ ```
Comments | NOTHING