獲取當(dāng)前鼠標(biāo)相對img元素的坐標(biāo) [javascript]?view plaincopy

$('img').mousemove(function(e)?{??

?????varpositionX=e.pageX-$(this).offset().left;?//獲取當(dāng)前鼠標(biāo)相對img的X坐標(biāo)??

?????varpositionY=e.pageY-$(this).offset().top;?//獲取當(dāng)前鼠標(biāo)相對img的Y坐標(biāo)??

?????console.log(positionX+'???'+positionY);??

?})??

獲取當(dāng)前鼠標(biāo)相對瀏覽器的原點(diǎn)的坐標(biāo)?????? [javascript]?view plaincopy

$('img').mousemove(function(e)?{??????

????var?xx?=?e.originalEvent.x?||e.originalEvent.layerX?||?0;??????

????var?yy?=?e.originalEvent.y?||e.originalEvent.layerY?||?0;???????????

????console.log(xx+'???'+yy);????????????

})??

獲取當(dāng)前鼠標(biāo)相對html頁面的原點(diǎn)的坐標(biāo)????????? [javascript]?view plaincopy

$('img').mousemove(function(e)?{??

????var?pageX=e.pageX;??????????

????var?pageY=e.pageY;?????????

????console.log(pageX+'???'+pageY);??????????

})??

1，獲取對象
var obj = $("#image");???????????????

2，獲取對象元素的位置(offset()方法)
var offset = obj.offset();
獲取對象元素的位置，分別是元素的top和left，調(diào)用方法是：offset.left和offset.top，可知當(dāng)前對象的左部和頂部位置。??

3，獲取對象元素的寬度(width()方法)
var right = offset.left+obj.width();
實(shí)例中是獲取對象的右下角位置，創(chuàng)建新窗口的左部位置。

4，獲取對象元素的高度(height()方法)
???var down =offset.top+obj.height();
實(shí)例中是獲取對象的右下角位置，創(chuàng)建新窗口的頂部位置。??????????????????????????????

5.獲取對象相對于父元素的位置(position()方法)?????????????????????? var x = obj.position().top;?????????????????????????????????? var y =obj.position().left; [javascript]?view plaincopy

<scripttype="text/javascript">??

$(document).ready(function(){??

?????????alert($(window).height());//瀏覽器當(dāng)前窗口可視區(qū)域高度??

????????alert($(document).height());//瀏覽器當(dāng)前窗口文檔的高度??

????????alert($(document.body).height());//瀏覽器當(dāng)前窗口文檔body的高度??

????????alert($(document.body).outerHeight(true));//瀏覽器當(dāng)前窗口文檔body的總高度包括border?padding?margin??

????????alert($(window).width());//瀏覽器當(dāng)前窗口可視區(qū)域?qū)挾??

????????alert($(document).width());//瀏覽器當(dāng)前窗口文檔對象寬度??

????????alert($(document.body).width());//瀏覽器當(dāng)前窗口文檔body的高度??

????????alert($(document.body).outerWidth(true));//瀏覽器當(dāng)前窗口文檔body的總寬度包括border?padding?margin??

})??

</script> ??

轉(zhuǎn)載于:https://www.cnblogs.com/taleche/p/6065545.html

總結(jié)

以上是生活随笔為你收集整理的jquery 获取鼠标和元素的坐标点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。