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> 
时间: 2024-10-16 08:02:00

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

获取鼠标和元素的坐标点

HTML: <div id="main">获取坐标</div> <div id="fixed_box"></div> 1,jquery 获取鼠标坐标点 a ,获取当前鼠标相对html页面的原点的坐标 $("#main").click(function(e) { var pageX = e.pageX; var pageY = e.pageY; console.log(pageX, pageY) })

使用jquery获取指定li元素后面的所有兄弟元素

使用jquery获取指定li元素后面的所有兄弟元素:如果我们已经获取了一个li元素,那么如何获取此li元素后面的所有的兄弟元素,下面就通过代码实例做一下简单介绍.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /&g

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

最近通过ocx做了一个视频插件,然后将插件放到html中(想知道的可以看一下) 因为我要操作这个插件,要播放,停止等,所以我需要获取这个元素,不出意外的,我就用jquery来获取,然后根本无法执行,然后用document来获取,正常执行,具体的如下所示 //正常执行 var obj = document.getElementById("player00"); obj.testhelloworld(); //无法执行 var playobj = $('#player00'); playo

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

query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的元素代码如下: $("#objid",document.frames('iframename').document) 显示iframe中body元素的内容. $(document.getElementById('iframeId').contentWindow.document.body)

jQuery获取和操作元素的属性和CSS样式

本文学习如何使用jQuery获取和操作元素的属性和CSS样式. 元素属性和Dom属性 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"></img>  我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性. 元素属性和Dom属性只是在我们对其进行不同解析时的不同

js及jquery获取页面和元素的宽高

js: 网页可见区域宽: document.body.clientWidth;(不含滚动条) 网页可见区域高: document.body.clientHeight;(不含滚动条) 网页可见区域宽: document.body.offsetWidth;(包括边线的宽); 网页可见区域高: document.body.offsetHeight;(包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHei

用jquery获取表单元素

表单验证需要获得表单元素,下面是获取表单元素的方法 例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script

jquery获取父级元素和子级元素

    <script type="text/javascript">  function show(x){     var y=$(x);//转换成jquery对象     //查找父元素    alert( y.parent().attr("name"));     alert( y.parent().attr("id"));     //查找祖先,是个集合 不包括自身     alert(y.parents("tr&q

用jquery获取表单元素(二)

获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true)  //判断是否已经打勾    --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr