js怎么設(shè)置鼠標(biāo)位置

在前段使用JavaScript開發(fā)獲取鼠標(biāo)當(dāng)前位置來(lái)計(jì)某個(gè)功能，如何獲取鼠標(biāo)當(dāng)前的位置，其實(shí)很多人都不知道怎么做，為此我為大家整理推薦了相關(guān)的知識(shí)，希望大家喜歡。

創(chuàng)新互聯(lián)公司秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，成都做網(wǎng)站、網(wǎng)站制作，重慶小程序開發(fā)，網(wǎng)頁(yè)設(shè)計(jì)制作，移動(dòng)網(wǎng)站建設(shè)，成都全網(wǎng)營(yíng)銷幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。

js設(shè)置鼠標(biāo)位置的方法

新建一個(gè)html代碼頁(yè)面，在這個(gè)html頁(yè)面找到body,然后在這個(gè)body里創(chuàng)建一個(gè)用來(lái)顯示坐標(biāo)位置的div,并給這個(gè)div添加一個(gè)id。如圖

創(chuàng)建div的代碼：

div id="point-loc"/div

使用pageX、pageY獲取鼠標(biāo)當(dāng)前位置。在title標(biāo)簽后面新建一個(gè)script，創(chuàng)建鼠標(biāo)移動(dòng)時(shí)獲取鼠標(biāo)當(dāng)前的位置。如圖：

js代碼：

script type="text/javascript"

document.onmousemove = function(e){

var loc = "當(dāng)前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc;

}

/script

保存html后使用瀏覽器打開即可看到效果。如圖：

4頁(yè)面所有代碼：

!DOCTYPE html

html

head

meta charset="UTF-8"

titlejs獲取鼠標(biāo)位置/title

script type="text/javascript"

document.onmousemove = function(e){

var loc = "當(dāng)前位置 x:"+e.pageX+",y:"+e.pageY

document.getElementById("point-loc").innerHTML = loc;

}

/script

/head

body

div id="point-loc"/div

/body

用jquery讓鼠標(biāo)定位輸入框

jQuery讓鼠標(biāo)定位輸入框的代碼如圖：

jQuery的簡(jiǎn)介：

jQuery是一個(gè)快速、簡(jiǎn)潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)（ 或JavaScript框架）。

jQuery設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡(jiǎn)便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。

jQuery的模塊可以分為：入口模塊、底層支持模塊和功能模塊。

其核心特性可以總結(jié)為：具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展。

擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

Jquery創(chuàng)建新div，并定位到鼠標(biāo)位置怎么實(shí)現(xiàn)

首先，只講思路方法不講具體代碼，別人直接給的永遠(yuǎn)不是自己的

創(chuàng)建新標(biāo)簽比較簡(jiǎn)單百度下就知道了就不說(shuō)了，然后至于定位到鼠標(biāo)位置，簡(jiǎn)單介紹下思路第一點(diǎn)，用clientX和clientY獲取鼠標(biāo)的坐標(biāo)即位置，然后給新建的div添加定位屬性，再將之前獲取的鼠標(biāo)位置的值賦值給div的top和left

ok，思路就這樣

JQuery獲取鼠標(biāo)坐標(biāo)的問(wèn)題

div onmouseover="test(event)"/div

function test(e){

//這里可得到鼠標(biāo)X坐標(biāo)

var pointX = e.pageX;

//這里可以得到鼠標(biāo)Y坐標(biāo)

var pointY = e.pageY;

}

jquery 如何獲取鼠標(biāo)當(dāng)前位置？

獲取當(dāng)前位置代碼如下：

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titlejavascript獲得鼠標(biāo)位置/title

/head

body

script

!-- 其中的參數(shù)e指的是事件--

function mouseMove(ev)

{

Ev= ev || window.event;

var mousePos = mouseCoords(ev);

//獲取當(dāng)前的x,y坐標(biāo)

document.getElementByIdx_x_x_xx_x("xxx").value = mousePos.x;

document.getElementByIdx_x_x_xx_x("yyy").value = mousePos.y;

}

function mouseCoords(ev)

{

//鼠標(biāo)移動(dòng)的位置

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

jquery 在鼠標(biāo)位置創(chuàng)建div

一定要用jquery嗎？ 我用普通的js給你實(shí)現(xiàn)了一個(gè)。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""

html

head

title New Document /title

/head

style type="text/css"

td {cursor:pointer}

#popmenu {display:none;position:absolute;padding:5px;border:1px solid black;background-color:white}

/style

body

table

tr

td第一行/td

td第一行/td

/tr

tr

td第二行/td

td第二行/td

/tr

tr

td第三行/td

td第三行/td

/tr

/table

div id="popmenu"

內(nèi)容

/div

/body

script type="text/javascript"

var menu=document.getElementById("popmenu");

var trs=document.getElementsByTagName("tr");

for(i=0;itrs.length;i++){

trs[i].onclick=function(event){

e=event?event:window.event;

t=e.target||e.srcElement;

menu.style.left=getPointerX(e)+"px";

menu.style.top=getPointerY(e)+"px";

menu.style.display="block";

}

}

function getPointerX(event) {

return event.pageX || (event.clientX +(document.documentElement.scrollLeft || document.body.scrollLeft));

}

function getPointerY(event) {

return event.pageY || (event.clientY +(document.documentElement.scrollTop || document.body.scrollTop));

}

/script

/html

網(wǎng)站標(biāo)題：鼠標(biāo)位置jquery,鼠標(biāo)位置移動(dòng)
鏈接分享：http://jinyejixie.com/article24/hojgce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、網(wǎng)站制作、ChatGPT、商城網(wǎng)站、自適應(yīng)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)