javascript获取文档坐标和视口坐标

元素的位置是以像素度量的,向右代表X坐标的增加,向下代表Y坐标的增加,但是,有两个不同的点作为坐标系的原点:元素的X和Y坐标可以相对于文档的左上角或者相对于在职中显示文档的视口的左上角。

在定级窗口和标签页中,”视口“只是实际显示文档内容的浏览器的一部分:它不包括浏览器的“外壳”(如菜单、工具条和标签页)。

针对框架也中显示的文档,是口试定了框架页的<iframe>元素。无论在何种情况下,当讨论元素的位置是,必须弄清楚所使用的坐标是文档坐标还是视口坐标。(注意,视口坐标有事也叫作窗口坐标)

如果文档比视口要小,或者说还未出现滚动,则文档的左上角就是视口的左上角,文档和视口坐标系统是同一个。但是一般来说,要在两种坐标系之间互相转换,必须加上或减去滚动的偏移量(scroll offset)。例如,在文档坐标中如果一个元素的Y坐标是200像素,并且用户已经把浏览器向下滚动了75像素,那么视口坐标中元素的Y坐标就是125像素。同样,在视口坐标中如果一个元素的X坐标是400像素,并且用户已经水平滚动了视口200像素,那么文档坐标中像素的X坐标中元素的X坐标就是600像素。

文档坐标比视口坐标更加基础,并且在用户滚动是他们不会发生变化。不过,在客户端编程中使用视口坐标是非常常见的。当使用CSS指定元素的位置时运用了文档坐标。但是最简单的查询元素位置的方法:getBoundingClientRect()返回视口坐标中的位置。类似的,当为鼠标事件注册事件处理程序函数时,报告的鼠标指针的坐标是在视口坐标系中。

为了在坐标系中转换,我们需要判定浏览器窗口的滚动条的位置。Window对象的pageXoffset和pageYOffset属性在所有的浏览器中提供这些值,除了IE8及更早的版本以外。IE(和所有现代浏览器)也可以通过scrollLeft和scrollTop属性来获得滚动条的位置。令人迷惑的是,正常的情况下通过查找文档的根节点(document.documentElement)来获取这些属性,但是在怪异模式下,必须在文档的<body>元素(documeng.body)上查询它们。以下显示了如何简便的查询滚动条的位置。

functon getScrollOffsets(w){
  w = w || window;
  var sLeft,sTop;
  if(w.pageXOffset != null) {
    sLeft = w.pageXOffset;
    sTop = w.pageYOffset;
    return {x:sLeft,y:sTop};
  }
  if(document.compatMode == "CSS1Compat"){
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
    return {x:sLeft,y:sTop};
  }else if(document.compatMode == "BackCompat"){
    sLeft = document.body.scrollLeft;
    sTop = document.body.scrollTop;
    return {x:sLeft,y:sTop};
  }
}

有时候能够判定视口的尺寸也是非常有用的,例如,为了确定文档的案部分是当前可见的。利用滚动偏移量查询视口的尺寸的简单方法在IE8及更早版本中无法工作,而且该技术在IE中的运行法师还要取决于浏览器是否处于怪异模式还是标准模式。

window下的属性:

innerHeight:包括滚动条在内的窗口内容部分的高度

innerWidth:包括滚动条在内的窗口内容部分的宽度

outerHeight:整个浏览器的高度,包括界面所有组成部分。

outerWidth:整个浏览器的宽度,包括界面所有组成部分。

pageXOffset:浏览器窗口的滚动条X轴的位置

pageYOffset:浏览器窗口的滚动条Y轴的位置

scrollX:浏览器窗口的滚动条X轴的位置

scrollY:浏览器窗口的滚动条Y轴的位置

属性

document.documentElement document.body
clientHeight 视口内可见内容的大小,不包括滚动的部分和滚动条。
clientWidth
clientLeft     
clientTop   
offsetHeight 内容大小,并且包括滚动条。
offsetWidth
offsetLeft   
offsetTop   
scrollHeight 滚动内容的大小,包括滚动的部分,但不包括滚动条。
scrollWidth
scrollTop   
scrollWidth

查询窗口的视口尺寸:

function getViewportSize(w){
  w = w || window;
  var cWidth,cHeight;
  if(w.innerWidth != null){
    cWidth = w.innerWidht;
    cHeight = w.innerHeight;
    return {w:cWidth,h:w.cHeight};
  }
  if(document.compatMode == "CSS1Compat"){
    cWidth = document.documentElement.clientWidth;
    cHeight = doument.documentElement.clientHeight;
    return {w:cWidth,h:w.cHeight};
  }else if(document.compatMode == "BackCompat"){
    cWidth = document.body.clientWidth;
    cHeight = doument.body.clientHeight;
    return {w:cWidth,h:w.cHeight};
  }
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2015-05-25

JavaScript获取对象在页面中位置坐标的方法

本文实例讲述了JavaScript获取对象在页面中位置坐标的方法.分享给大家供大家参考,具体如下: <script language="javascript" type="text/javascript" > function getXY(Obj) { var h = Obj.offsetHeight; for (var sumTop=0,sumLeft=0;Obj!=document.body;sumTop+=Obj.offsetTop,sumLeft

JS网页在线获取鼠标坐标值的方法

本文实例讲述了JS网页在线获取鼠标坐标值的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>显示鼠标坐标</title> </head> <body onMousemove="m

JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo

js鼠标及对象坐标控制属性详细解析

offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置. offsetHeight获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度.IE.Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框.NS.FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientH

javascript实时获取鼠标坐标值并显示的方法

本文实例讲述了javascript实时获取鼠标坐标值并显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo

js使用onmousemove和onmouseout获取鼠标坐标的方法

本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!DOCTYPE html> <html> <head> <script> function myFunction(e) { x=e.clientX; y=e.clientY; coor="Coordinat

JS获取鼠标坐标位置实例分析

本文实例分析了JS获取鼠标坐标位置的方法.分享给大家供大家参考,具体如下: 取鼠标坐标位置有这些:鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY),其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置(screenX,screenY)在所有的浏览器中都支持,但是鼠标在页面的坐标位置(pageX,pageY)在IE8及更早版本不支持,但是没有关系,可以通过s

js实现获取div坐标的方法

本文实例讲述了js实现获取div坐标的方法.分享给大家供大家参考,具体如下: html中最常使用的控件就是div了,那么如何获取div的坐标呢? 如下方法可以实现: /*** * 获取div的坐标 * @param divObj * @returns {{width: number, height: number, left: *, top: Window}} */ com.whuang.hsj.divCoordinate=function(divObj){ if(typeof divObj =

javascript获取当前鼠标坐标的方法

本文实例讲述了javascript获取当前鼠标坐标的方法.分享给大家供大家参考.具体实现方法如下: 对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解.具体代码如下: 复制代码 代码如下: <html> <head> <title>javascript获取当前鼠标坐标</title> <meta http-equiv="content-type" content="text/html;chars

JS onmousemove鼠标移动坐标接龙DIV效果实例

效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 20px;            height: 20px;

js判断鼠标位置是否在某个div中的方法

本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在

JS实现鼠标箭头变成一个燃烧烛光效果的方法

本文实例讲述了JS实现鼠标箭头变成一个燃烧烛光效果的方法.分享给大家供大家参考.具体如下: 这是一个完全的鼠标箭头美化效果的JS代码,通过这个JS代码,把鼠标的箭头加上一个样式,燃烧中的蜡烛.这个也是很古老的代码了,只能在IE8及以下浏览器运行,代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

js实现鼠标移动到图片产生遮罩效果

本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mask</title> <style> .pic{ width:300px; height:250px; background:url(icon/pro

js实现鼠标点击左上角滑动菜单效果代码

本文实例讲述了js实现鼠标点击左上角滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里需要鼠标点击激活的网页左上角菜单,不点击不会滑出来,可以改造成二级菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-hd-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

js实现弹出框的拖拽效果实例代码详解

具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

js实现鼠标单击Tab表单切换效果

本文实例为大家分享了js实现鼠标单击Tab表单切换展示的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; border:0; } body{ text

jQuery当鼠标悬停时放大图片的效果实例

这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7">  <LI sizcach

js由下向上不断上升冒气泡效果实例

本文实例讲述了js由下向上不断上升冒气泡效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现气泡从水中急速上升效果</title> <style type="text/css"> body { cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#FFF; l

jquery实现鼠标滑过后动态图片提示效果实例

本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {