获取当前鼠标相对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. java项目调用kettleJob和Trans

    1.调用本地Job和Trans 较简单不用多说没有遇到任何问题,以下是代码: import org.pentaho.di.core.KettleEnvironment; import org.pent ...

  2. easyui datagrid 动态添加columns属性

    公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦.因为以前一般用easyui 的datagrid ...

  3. 《Matrix Computation 3rd》读书笔记——第4章 特殊线性系统

  4. OpenGL顶点数组

    概述 作为在立即模式(glBegin()与glEnd()之间)下指定单个顶点数据的替代,你可以保存顶点数据在一组列表中,包括顶点位置.法线.纹理坐标与颜色信息.并且你可以通过索引数组解引用数组元素绘制 ...

  5. CSS 选择器(转)

    原文转自:http://www.cnblogs.com/xyzhanjiang/p/5447406.html CSS 选择器除了样式表匹配元素时需要用到,在使用 jQuery 等库的时候也可以利用 C ...

  6. jquery之css操作

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. vs2008及以上的ActiveX测试容器在哪儿

    解压缩 vssetupdir \Samples\1033\VC2010Samples.zip ,位于C++\MFC\ole\TstCon\ vs2008中的sample的话,要改TCProps项目的L ...

  8. Oracle 用户管理与权限控制

    Oracle 用户管理与权限控制 oracle数据库的权限系统分为系统权限与对象权限.系统权限( database system privilege )可以让用户执行特定的命令集.例如,create ...

  9. (转)php-curl响应慢(开发微信授权登陆时碰到的问题)

    最近在做一个php小项目的时候,发现curl调用微信的授权api.weixin.qq.com,经常是需要等待很久,但是有时候却很快. 刚开始以为是网络慢问题,没去注意.后面通过打上时间日志观察发现,慢 ...

  10. http请求相关

    1.POST方式向服务器发送AJAX请求时   设置请求头 application/x-www-form-urlencoded 2.表单上传文件时     设置请求头 multipart/form-d ...