获取当前鼠标相对img元素的坐标
  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. })
获取当前鼠标相对浏览器的原点的坐标      
  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页面的原点的坐标         
  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;
  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>

jquery 获取鼠标和元素的坐标点的更多相关文章

  1. jquery如何获得页面元素的坐标值

    http://www.cnblogs.com/pansly/archive/2011/05/25/2056222.html jquery如何获得页面元素的坐标值   yulutxt是输入经典语录的输入 ...

  2. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  3. jQuery获取或设置元素的宽度和高度

    jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...

  4. jquery获取含有某元素的的控件 “控件名[属性名=值]”

    jquery获取含有某元素的的控件 “控件名[属性名=值]”. 如,获取 <input id="${cheackbox}" data-role="icheck&qu ...

  5. jquery获取的html元素和document获取的元素的区别

    最近通过ocx做了一个视频插件,然后将插件放到html中(想知道的可以看一下) 因为我要操作这个插件,要播放,停止等,所以我需要获取这个元素,不出意外的,我就用jquery来获取,然后根本无法执行,然 ...

  6. 利用jQuery获取鼠标当前的坐标

    文字来源:http://www.smalluv.com/jquery_code_106.html jQuery获取当前鼠标坐标位置: <div id="testDiv"> ...

  7. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...

  8. coding++:JS/jQuery获取兄弟姐妹等元素

    jQuery获取: jQuery.parent(expr),找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span") ...

  9. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

随机推荐

  1. 酷炫ILOVEU

    assume cs:code code segment main: ;显示背景22*80 ;dh中放行号 ;dl中放列号 bibi: push cx ;显示光标 ;第0页 int 10h ;在光标处显 ...

  2. 从txt文件中读取数据放在二维数组中

    1.我D盘中的test.txt文件内的内容是这样的,也是随机产生的二维数组 /test.txt/ 5.440000 3.4500006.610000 6.0400008.900000 3.030000 ...

  3. POI2012

    现在才开始写 POI 是不是太弱了? -Rendezvous 怎么说呢,我发现我的代码好长啊-长啊-长啊-长长长长长长长长长长长长长长长长长长长长长长啊- 大概就是在一个内向树上搞一个类似 lca 的 ...

  4. js中java式的类成员

    function Range(from,to,x){ //实例(对象)字段 this.x=x; } //类字段 Range.Y="类字段"; //类方法 Range.s=funct ...

  5. Python线程通信

    subprocess 作用 模块用于生产新的进程,连接到其输入.输出.错误管道,并获取其返回值 1. 如何使用subprocess模块 启动子进程的推荐方法是使用以下方便功能. 对于更高级的用例,当这 ...

  6. C#子类调用基类构造备忘

    using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace First ...

  7. vim 高亮显示配置

    /etc/vim/vimrc set showmatch "bracket matchset matchtime=5 "bracket match time 5 set ignor ...

  8. iScroll知识点

    1.如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll.最好给浏览器100或者200毫秒的间隙再去初始化iScroll. 2.iScroll作用于滚动区域的外 ...

  9. visual studio 2013快捷键与2012不同

    升级了Visual Studio2013后发现有些快捷键不能使用,于是自己尝试设置找回,还真给发现了: 依次选择(工具-->选项-->环境-->键盘)把映射方案改成Visual C# ...

  10. j技术方案

    采用.net4.0作为基础技术平台,原来是采用.net4.5的,但是后来发现.net4.5不支持Windows Server2003,所以又降为.net4.0. 1.asp.net mvc 4.0 用 ...