Beispiele für den Erhalt von Mauskoordinaten und die Anzeige von Inhalten basierend auf der Mausposition-js-Tutorial-php.cn

Beispiele für den Erhalt von Mauskoordinaten und die Anzeige von Inhalten basierend auf der Mausposition

零下一度

Freigeben： 2017-06-26 11:19:28

Original

1691 Leute haben es durchsucht

Erhalten Sie die Mauskoordinaten und lassen Sie je nach Div, in dem sich die Maus befindet, unterschiedliche Inhalte anzeigen:

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBeispiele für den Erhalt von Mauskoordinaten und die Anzeige von Inhalten basierend auf der Mausposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!