欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS獲取鼠標(biāo)坐標(biāo)并且根據(jù)鼠標(biāo)位置不同彈出不同內(nèi)容

 更新時(shí)間：2017年06月12日 08:42:10   作者：v斌v  
這篇文章主要介紹了js獲取鼠標(biāo)坐標(biāo)并且根據(jù)鼠標(biāo)位置不同彈出不同內(nèi)容的實(shí)例代碼,需要的朋友可以參考下

獲取鼠標(biāo)坐標(biāo)，并且根據(jù)鼠標(biāo)所在div彈出不同內(nèi)容：

<!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>鼠標(biāo)的距離</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;
  // 此處記錄鼠標(biāo)停留在組建上的時(shí)候的位置, 可以自己通過(guò)加減常量來(lái)控制離鼠標(biāo)的距離.
  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; ">鼠標(biāo)相對(duì)于觸發(fā)事件元素的位置<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獲取鼠標(biāo)坐標(biāo)并且根據(jù)鼠標(biāo)位置不同彈出不同內(nèi)容，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

相關(guān)文章

最新評(píng)論