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

    获取当前鼠标相对img元素的坐标
    [javascript] view plain copy
     
    1. $('img').mousemove(function(e) {  
    2.      varpositionX=e.pageX-$(this).offset().left; //获取当前鼠标相对img的X坐标  
    3.      varpositionY=e.pageY-$(this).offset().top; //获取当前鼠标相对img的Y坐标  
    4.      console.log(positionX+'   '+positionY);  
    5.  })  
    获取当前鼠标相对浏览器的原点的坐标      
    [javascript] view plain copy
     
    1. $('img').mousemove(function(e) {      
    2.     var xx = e.originalEvent.x ||e.originalEvent.layerX || 0;      
    3.     var yy = e.originalEvent.y ||e.originalEvent.layerY || 0;           
    4.     console.log(xx+'   '+yy);            
    5. })  
    获取当前鼠标相对html页面的原点的坐标         
    [javascript] view plain copy
     
    1. $('img').mousemove(function(e) {  
    2.     var pageX=e.pageX;          
    3.     var pageY=e.pageY;         
    4.     console.log(pageX+'   '+pageY);          
    5. })  

    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;
    [javascript] view plain copy
     
    1. <scripttype="text/javascript">  
    2. $(document).ready(function(){  
    3.          alert($(window).height());//浏览器当前窗口可视区域高度  
    4.         alert($(document).height());//浏览器当前窗口文档的高度  
    5.         alert($(document.body).height());//浏览器当前窗口文档body的高度  
    6.         alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin  
    7.         alert($(window).width());//浏览器当前窗口可视区域宽度  
    8.         alert($(document).width());//浏览器当前窗口文档对象宽度  
    9.         alert($(document.body).width());//浏览器当前窗口文档body的高度  
    10.         alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin  
    11. })  
    12. </script>   
  • 相关阅读:
    CQUOJ 10819 MUH and House of Cards
    CQUOJ 9920 Ladder
    CQUOJ 9906 Little Girl and Maximum XOR
    CQUOJ 10672 Kolya and Tandem Repeat
    CQUOJ 9711 Primes on Interval
    指针试水
    Another test
    Test
    二分图匹配的重要概念以及匈牙利算法
    二分图最大匹配
  • 原文地址:https://www.cnblogs.com/taleche/p/6065545.html
Copyright © 2011-2022 走看看