获取当前鼠标相对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. WinCE小结

    第一章:开发环境搭建 软件列表:详细说明 1.系统定制和编译:Platform Builder 5.0 (依赖于Net Framework1.1)2.应用程序编写:早期的用Embedded Visua ...

  2. Could not load java.net.BindException错误解决

    出现了错误异常:信息: Illegal access: this web application instance has been stopped already.  Could not load ...

  3. Linux监控分析实战-1

    监控概述及5个大指标 cpu mem   内存 io        磁盘交互 load     负载 Network 网络 它们之间关系是相互彼此依赖,任何一个高负载都会到导致其他指标出现问题: 网卡 ...

  4. Visibility属性控制元素的显示和隐藏

    w3cschool案例: <!DOCTYPE html> <html> <body> <p id="p1">这是一段文本.</ ...

  5. 转载:scala中:: , +:, :+, :::, ++的区别

    原文链接:https://segmentfault.com/a/1190000005083578 初学Scala的人都会被Seq的各种操作符所confuse.下面简单列举一下各个Seq操作符的区别. ...

  6. Does Lamda expression return value?

    Basically, the compiler does this for you. If you write a lambda as a single statement (and don't in ...

  7. oracle中TO_CHAR与TO_DATE

    TO_CHAR 是把日期或数字转换为字符串TO_DATE 是把字符串转换为数据库中得日期类型转换函数 TO_DATE格式(以时间:2016-07-25   11:45:25为例) Year: yy t ...

  8. mybatis实战教程(mybatis in action)之十:mybatis SqlSessionSupport 的使用,构件DAO 层的应用

    前面的系列mybatis 文章,已经基本讲到了mybatis的操作,但都是基于mapper隐射操作的,在mybatis 3中这个mapper 接口貌似充当了以前在ibatis 2中的 DAO 层的作用 ...

  9. Hadoop总结篇之一------开篇

    从今天开始新的系列:Hadoop总结篇 之前的hadoop学习篇由于是学习过程中随手记下来的一些内容,不具有系统性.所以在这个系列中,将凭着这段时间的研究心得,来记录一些自认为比较重要的东西. 本系列 ...

  10. Redis 简单命令

    1. 新增 set keyName "keyValue" 2. 获取 get keyName 查看所有Key keys * 3. 删除 //删除当前数据库中的所有Key flush ...