jquery獲取各種鼠標位置
獲取當前鼠標相對img元素的座標
$('img').mousemove(function(e) {
var positionX=e.pageX-$(this).offset().left; //獲取當前鼠標相對img的X座標
var positionY=e.pageY-$(this).offset().top; //獲取當前鼠標相對img的Y座標
console.log(positionX+' '+positionY);
})
獲取當前鼠標相對瀏覽器的原點的座標
$('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);
})
獲取當前鼠標相對html頁面的原點的座標
$('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，調用方法是：offset.left和offset.top，可知當前對象的左部和頂部位置。
3，獲取對象元素的寬度(width()方法)
var right = offset.left+obj.width();
實例中是獲取對象的右下角位置，創建新窗口的左部位置。
4，獲取對象元素的高度(height()方法)
var down = offset.top+obj.height();
實例中是獲取對象的右下角位置，創建新窗口的頂部位置。
5.獲取對象相對於父元素的位置(position()方法)
var x = obj.position().top;
var y = obj.position().left;
<script type="text/javascript">
$(document).ready(function(){
alert($(window).height()); //瀏覽器當前窗口可視區域高度
alert($(document).height()); //瀏覽器當前窗口文檔的高度
alert($(document.body).height());//瀏覽器當前窗口文檔body的高度
alert($(document.body).outerHeight(true));//瀏覽器當前窗口文檔body的總高度 包括border padding margin
alert($(window).width()); //瀏覽器當前窗口可視區域寬度
alert($(document).width());//瀏覽器當前窗口文檔對象寬度
alert($(document.body).width());//瀏覽器當前窗口文檔body的高度
alert($(document.body).outerWidth(true));//瀏覽器當前窗口文檔body的總寬度 包括border padding margin
})
</script>