JS獲取鼠標坐標并且根據(jù)鼠標位置不同彈出不同內(nèi)容
更新時間：2017年06月12日 08:42:10 作者：v斌v
這篇文章主要介紹了js獲取鼠標坐標并且根據(jù)鼠標位置不同彈出不同內(nèi)容的實例代碼,需要的朋友可以參考下
獲取鼠標坐標，并且根據(jù)鼠標所在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>鼠標的距離</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; ">鼠標相對于觸發(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獲取鼠標坐標并且根據(jù)鼠標位置不同彈出不同內(nèi)容，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
下面小編就為大家?guī)硪黄猨s獲取Html元素的實際寬度高度的方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家詳細介紹了JS模擬實現(xiàn)京東快遞單號查詢，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文章為你提供一款js 返回變量的類型代碼哦，如果你不懂得如何獲取js變量的類型的話，看看我們下面的代碼你就知道如何獲取js變量的代碼哦。2010-07-07
JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速npm腳本優(yōu)化及性能分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01
利用Js的console對象,在控制臺打印調(diào)式信息測試Js的實現(xiàn)
下面小編就為大家?guī)硪黄肑s的console對象,在控制臺打印調(diào)式信息測試Js的實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了js簡單實現(xiàn)點擊左右運動的方法,實例分析了javascript實現(xiàn)左右運動的相關要點與技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
解析javascript瀑布流原理實現(xiàn)圖片滾動加載
這篇文章主要幫助大家解析javascript瀑布流原理，實現(xiàn)js圖片滾動加載2016-03-03
在小程序中實現(xiàn)埋點的基本思路是利用生命周期函數(shù)和事件回調(diào),插入數(shù)據(jù)上報代碼,下面將介紹如何在小程序中實現(xiàn)埋點,并通過代碼示例進行說明,感興趣的朋友一起看看吧2024-04-04
Javascript DOM的簡介,節(jié)點和獲取元素詳解
下面小編就為大家分享一篇詳談DOM的簡介,節(jié)點和獲取元素，具有非常好的參考價值，一起跟隨小編過來看看吧，希望對大家有所幫助2021-11-11
這篇文章主要為大家詳細介紹了JS基于VUE組件實現(xiàn)城市列表效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08