jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能示例
更新時(shí)間：2019年01月05日 16:15:31 作者：The_road_of_ordinary
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)獲取當(dāng)前鼠標(biāo)位置并輸出功能。分享給大家供大家參考，具體如下：
jQuery獲取當(dāng)前鼠標(biāo)位置并輸出
1.html
<body onmousemove="mousemove(event)"></body>
2.css
html,
body {
width: 100%;
height: 100%;
background: #A5CEDB;
position: relative;
}
.newDiv {
position: absolute;
background: red;
color: white;
width: 100px;
height: 50px;
}
3.js
var movex;
var movey; //用來接受鼠標(biāo)位置的全局變量
function mousemove(e) {
e = e || window.event;
if(e.pageX || e.pageY) {
movex = e.pageX;
movey = e.pageY
}
creatDiv(movex, movey);
}
function creatDiv(x, y) {
$(".newDiv").remove();
var str = ("<div class=\'newDiv\'>" + x + "," + y + "</div>");
$("body").append(str);
$(".newDiv").css("left", x + "px").css("top", y + "px");
}
完整示例代碼如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>m.fzitv.net js獲取當(dāng)前鼠標(biāo)位置</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var movex;
var movey; //用來接受鼠標(biāo)位置的全局變量
function mousemove(e) {
e = e || window.event;
if(e.pageX || e.pageY) {
movex = e.pageX;
movey = e.pageY
}
creatDiv(movex, movey);
}
function creatDiv(x, y) {
$(".newDiv").remove();
var str = ("<div class=\'newDiv\'>" + x + "," + y + "</div>");
$("body").append(str);
$(".newDiv").css("left", x + "px").css("top", y + "px");
}
</script>
<style>
html,
body {
width: 100%;
height: 100%;
background: #A5CEDB;
position: relative;
}
.newDiv {
position: absolute;
background: red;
color: white;
width: 100px;
height: 50px;
}
</style>
</head>
<body onmousemove="mousemove(event)"></body>
</html>
效果：
（提示：可以在creatDiv方法里面酌情加入想要的偏移量）
PS：感興趣的朋友可以使用如下工具測(cè)試上述代碼的運(yùn)行效果：
在線HTML/CSS/JavaScript代碼運(yùn)行工具:
http://tools.jb51.net/code/HtmlJsRun
在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:
http://tools.jb51.net/code/WebCodeRun
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)獲取table中鼠標(biāo)click點(diǎn)擊位置行號(hào)與列號(hào)的方法
- jQuery實(shí)時(shí)顯示鼠標(biāo)指針位置和鍵盤ASCII碼
- js與jquery中獲取當(dāng)前鼠標(biāo)的x、y坐標(biāo)位置的代碼
- jquery實(shí)現(xiàn)的元素的left增加N像素 鼠標(biāo)移開會(huì)慢慢的移動(dòng)到原來的位置
- 為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開”的功能
- Js和JQuery獲取鼠標(biāo)指針坐標(biāo)的實(shí)現(xiàn)代碼分享
- jQuery獲得指定元素坐標(biāo)的方法
- jquery中獲得元素尺寸和坐標(biāo)的方法整理
- JQuery 獲得絕對(duì),相對(duì)位置的坐標(biāo)方法
相關(guān)文章
最近在做手機(jī)上的web app，很多場(chǎng)景需要使用到類似tab切換和圖片輪播的東西，需要支持手勢(shì)和鼠標(biāo)點(diǎn)擊的，于是就基于jquery弄了一個(gè)，每一個(gè)參數(shù)有詳細(xì)的說明2012-07-07
基于jquery實(shí)現(xiàn)的表格分頁(yè)實(shí)現(xiàn)代碼
該方法的運(yùn)用是從后臺(tái)數(shù)據(jù)庫(kù)中一次性取出所有的數(shù)據(jù)，運(yùn)用Jquery把一部分?jǐn)?shù)據(jù)隱藏起來，事實(shí)上數(shù)據(jù)還是全部在html頁(yè)面中2011-06-06
最近做一個(gè)項(xiàng)目，許多功能都是關(guān)于彈出框的，在做的過程中發(fā)現(xiàn)會(huì)有好多自己考慮不到的問題，下面以一個(gè)示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了jQuery操作cookie方法,包括了對(duì)cookie的讀取、寫入、刪除等常用的操作,并給出了實(shí)例總結(jié),需要的朋友可以參考下
2014-11-11 
默認(rèn)設(shè)置下，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其它操作必須等待請(qǐng)求完成才可以執(zhí)行
2011-10-10 
jquery文字填寫自動(dòng)高度的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query文字填寫自動(dòng)高度的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11 
下面這些知識(shí)都是開發(fā)過程中，經(jīng)常遇到的。所以整理了下，需要的朋友可以參考下。
2009-12-12 
這篇文章主要介紹了jQuery中nextAll()方法用法,實(shí)例分析了nextAll()方法的功能、定義及查找匹配元素之后所有的同輩元素使用技巧,需要的朋友可以參考下
2015-01-01 
jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08