cari

Rumah >hujung hadapan web >tutorial js >获取鼠标坐标和根据鼠标位置显示内容的实例

获取鼠标坐标和根据鼠标位置显示内容的实例

零下一度
零下一度asal
2017-06-26 11:19:281777semak imbas

获取鼠标坐标，并且根据鼠标所在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>

 

Atas ialah kandungan terperinci 获取鼠标坐标和根据鼠标位置显示内容的实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：分享几个常用的弹框Artikel seterusnya：总结JavaScript中的特效系列

Artikel berkaitan

Lihat lagi