关闭

jquery获取各种鼠标位置

标签: jquery获取各种鼠标位置jquery鼠标
145人阅读 评论(0) 收藏 举报
获取当前鼠标相对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>
                             
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1764次
    • 积分:61
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条
    文章分类