獲取鼠標坐標，并且根據鼠標所在div彈出不同內容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><head><title>鼠標的距離</title><script type="text/javascript">var mouseX;var mouseY;function show(event) { var infoDiv = document.getElementById('infoDiv'); mouseOver(event); document.getElementById("a").innerHTML = mouseX+" "+mouseY ; infoDiv.style.display = "block"; //infoDiv.innerHTML = mouseX+" "+mouseY; infoDiv.style.left = mouseX + 10 + "px"; infoDiv.style.top = mouseY + 10 + "px"; }function hide() { var infoDiv = document.getElementById('infoDiv').style.display = "none";;}function mouseOver(obj) { e = obj || window.event; // 此處記錄鼠標停留在組建上的時候的位置, 可以自己通過加減常量來控制離鼠標的距離. mouseX = e.layerX|| e.offsetX; mouseY = e.layerY|| e.offsetY; if(e.target.id == "aaa") { infoDiv.innerHTML = "aaa"; } else if(e.target.id == "bbb") { infoDiv.innerHTML = "bbb"; } else if(e.target.id == "ccc") { infoDiv.innerHTML = "ccc"; } else if(e.target.id == "ddd") { infoDiv.innerHTML = "ddd"; }else{ infoDiv.innerHTML = "eee"; }}</script></head><body><div onmousemove="show(event);" onmouseout="hide();" style="margin:150px ; background:#ff0; height:300px; width:300px; position:relative; ">鼠標相對于觸發事件元素的位置<strong id="a"></strong> <div id="aaa">aaa</div> <div id="bbb">bbb</div> <div id="ccc">ccc</div> <div id="ddd">ddd</div> <div id="infoDiv" style="display: none; position: absolute; width: 100px; height: 100px; background-color: #F1F19B;"></div></div></body></html>以上所述是小編給大家介紹的JS獲取鼠標坐標并且根據鼠標位置不同彈出不同內容，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
圖片精選
