zoukankan      html  css  js  c++  java
  • jquery 获取鼠标和元素的坐标点

    获取当前鼠标相对img元素的坐标

    $('div').mousemove(function(e) {  
         varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对div的X坐标  
         varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对div的Y坐标  
         console.log(positionX+'   '+positionY);  
     })

    获取当前鼠标相对浏览器的原点的坐标

    $('div').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页面的原点的坐标

    $('div').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;
    <scripttype="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> 
  • 相关阅读:
    第十五节 css3动画之animation简单示例
    第十四节 css3动画之animation
    第十三节 css3动画之翻页动画
    第十二节 css3动画之三维X轴旋转
    第十一节 css3动画之三维Y轴旋转
    第十节 css3动画之transform斜切
    第九节 css3动画之transform旋转
    第八节 css3动画之transform缩放
    ECMAScript基本语法——⑤运算符 比较运算符
    ECMAScript基本语法——⑤运算符 赋值运算符
  • 原文地址:https://www.cnblogs.com/yiven/p/7879575.html
Copyright © 2011-2022 走看看