js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
更新時(shí)間：2011年05月23日 21:44:56 作者：
jquery中獲取當(dāng)前鼠標(biāo)的x、y位置位置的代碼，需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
<div id="testDiv">放在我上面</div>
<script type="text/javascript">
$('#testDiv').mousemove(function(e) {
var xx = e.originalEvent.x || e.originalEvent.layerX || 0;
var yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$(this).text(xx + '---' + yy);
});
</script>
javascript獲取鼠標(biāo)當(dāng)前位置坐標(biāo)
鼠標(biāo)滑動(dòng)顯示鼠標(biāo)的當(dāng)前位置坐標(biāo)，主要是onmousemove函數(shù)。
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript獲得鼠標(biāo)位置</title>
</head>
<body>
<script>
function mouseMove(ev)
{
Ev= ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xxx").value = mousePos.x;
document.getElementById("yyy").value = mousePos.y;
}
function mouseCoords(ev)
{
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return{
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
</script>
鼠標(biāo)X軸:
<input id=xxx type=text>
鼠標(biāo)Y軸:
<input id=yyy type=text>
</body>
您可能感興趣的文章:
相關(guān)文章
使用CDN和AJAX加速WordPress中jQuery的加載
這篇文章主要介紹了使用CDN和AJAX加速WordPress中jQuery的加載的方法,注意一下WordPress中以及CDN的Google連接在內(nèi)地的網(wǎng)絡(luò)問(wèn)題,需要的朋友可以參考下2015-12-12
本文匯總介紹了24款本年度熱門(mén)實(shí)用的jQuery插件，使用得當(dāng)?shù)脑挘梢源蟠蠼档晚?xiàng)目的開(kāi)發(fā)難度，這里推薦給大家。2014-12-12
兩種方法解決javascript url post 特殊字符轉(zhuǎn)義 + & #
本文主要介紹javascript使用url傳值的時(shí)候數(shù)據(jù)丟失的問(wèn)題，希望對(duì)大家有所幫助。2016-04-04
jquery插件corner實(shí)現(xiàn)圓角邊框的方法
這篇文章主要介紹了jquery插件corner實(shí)現(xiàn)圓角邊框的方法,實(shí)例分析了jQuery插件corner的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)的購(gòu)物車(chē)物品數(shù)量加減功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的購(gòu)物車(chē)物品數(shù)量加減功能,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
jQuery實(shí)現(xiàn)偽分頁(yè)的方法分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)偽分頁(yè)的方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)偽分頁(yè)的具體步驟與相關(guān)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02
Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象,Map()方法詳解以及數(shù)組中查詢(xún)某值是否存在
今天小編就為大家分享一篇關(guān)于Jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象|Map()方法詳解以及數(shù)組中查詢(xún)某值是否存在，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了jquery+html仿翻頁(yè)相冊(cè)功能，前端實(shí)現(xiàn)的相冊(cè)模仿功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
無(wú)需 Flash 使用 jQuery 復(fù)制文字到剪貼板
需要做的只是引入其腳本，在HTML標(biāo)簽上賦一個(gè)“data-clipboard-target”屬性然后寫(xiě)一小段JavaScript片段。為了演示假定有一個(gè)貨幣轉(zhuǎn)換應(yīng)用，在一個(gè)文本框中輸入數(shù)值時(shí)同時(shí)將兌換結(jié)果顯示在另一個(gè)文本框中，當(dāng)點(diǎn)擊文本框時(shí)，會(huì)觸發(fā)事件將其復(fù)制到剪貼板然后顯示一條消息。2016-04-04
jquery zTree異步加載簡(jiǎn)單實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載簡(jiǎn)單實(shí)例，ztree采用了延遲加載技術(shù)，上萬(wàn)節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺，感興趣的小伙伴們可以參考一下2016-02-02