JS獲取鼠標坐標并且根據鼠標位置不同彈出不同內容
更新時間：2017年06月12日 08:42:10 作者：v斌v
這篇文章主要介紹了js獲取鼠標坐標并且根據鼠標位置不同彈出不同內容的實例代碼,需要的朋友可以參考下
獲取鼠標坐標，并且根據鼠標所在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; ">鼠標相對于觸發(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獲取鼠標坐標并且根據鼠標位置不同彈出不同內容，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
本文主要分享了原生js封裝實現(xiàn)放大鏡效果的示例代碼，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript是單線程的腳本語言,所以代碼在執(zhí)行的時候,只有一個主線程來執(zhí)行所有的任務,同一個時間只能做同一件事情。本文就為大家詳細講解一下它的件循環(huán)機制，需要的可以參考一下2022-04-04
分享XmlHttpRequest調用Webservice的一點心得
因為項目需要，以后前端、手機客戶端調用ASP.NET的Webservice來獲取信息.所以這段時間開始看Webservice，試著通過XmlHttpRequest調用Webservice，過程中碰到不少問題，也有不少的收獲2012-07-07
這篇文章主要介紹了js實現(xiàn)字符串和數(shù)組之間相互轉換操作的相關資料，感興趣的小伙伴們可以參考一下2016-01-01
JavaScript中的構造函數(shù)和實例對象之間的關系(構造器)
這篇文章主要介紹了JavaScript中的構造函數(shù)和實例對象之間的關系(構造器),需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了mescroll.js上拉加載下拉刷新組件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
代碼永遠都是那么好玩，而 Trick 不斷。那天張克軍在 twitter 上說還有比 [].slice.call() 更短的 Array 轉換么2011-10-10
在測試過程中發(fā)現(xiàn)alert會中斷settimeout的計時功能,關閉對話框后，settimeout的時間會重頭開始計時，而不是從中斷處，感興趣的朋友可以了解下2013-07-07
高性能web開發(fā) 如何加載JS，JS應該放在什么位置？
所有瀏覽器在下載JS的時候，會阻止一切其他活動，比如其他資源的下載，內容的呈現(xiàn)等等。至到JS下載、解析、執(zhí)行完畢后才開始繼續(xù)并行下載其他資源并呈現(xiàn)內容。2010-05-05
使用PBFunc在Powerbuilder中支付寶當面付款功能
這篇文章主要介紹了使用PBFunc在Powerbuilder中支付寶當面付款功能的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10