getBoundingClientRect() 来获取页面元素的位置

document.documentElement.getBoundingClientRect

该方法返回一个对象，从而获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，即分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角（注意，不是文档区域的左上角）的偏移像素值。并且该方法已经不再是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，可以说在获得页面元素位置上效率能有很大的提高，所以获取页面上某个元素相对于浏览器窗口的偏移量就成了getBoundingClientRect的用武之地了，按照一篇文章的说法，it's awsome，太帅了=。=因为不必纠结于offset、pagex、clientx等等等等等等。在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

代码示例：

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Demo</title>

</head>

<body style="width:2000px; height:1000px;">

    <div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>

</body>

</html>

<script>

document.getElementById('demo').onclick=function (){

        if (document.documentElement.getBoundingClientRect) {

            alert("left:"+this.getBoundingClientRect().left)

            alert("top:"+this.getBoundingClientRect().top)

            alert("right:"+this.getBoundingClientRect().right)

            alert("bottom:"+this.getBoundingClientRect().bottom)

            var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

           var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;

            alert("Demo的位置是X:"+X+";Y:"+Y)

        }

}

</script>

JS实现拖动（2）的更多相关文章

  1. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  2. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  3. js实现拖动验证码

    效果图: Index.html <!DOCTYPE html> <html lang="en"> <head> <meta http-eq ...

  4. js窗口拖动 模版

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  6. 基于js鼠标拖动图片排序

    分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...

  7. node-webkit学习之【无边框窗口用JS实现拖动改变大小等】

    效果如下图 原生的如下图(原生的用在自己的app上面太丑了,并且还带边框,所以重写了左上角的三个功能键) 1.首先了解一下nw底下的package.json 文件 { "name" ...

  8. node-webkit无边框窗口用纯JS实现拖动改变大小

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     & ...

  9. jquery.nestable.min.js可拖动标签

    主容器为一个叫div的classname为dd的东西. 只要对这个主容器进行捕获加上一个方法 nestable就可以了. 可以给的属性为​​ serialize   直接以字符串的形式给入,意思就是按 ...

  10. JS 实现拖动效果

    <html> <body style="margin:0px;"> <script src="http://ajax.googleapis. ...

随机推荐

  1. ASIHTTPRequestErrorDomain Code=5

    ASIHttpRequest解析带空格的URL时 出错!!!(已解决) 用的是post请求 URL 地址是: http://111.234.51.56/login_member.pl?time=201 ...

  2. 技术人生：Knowing when or where it’s appropriate to use a technique or tool is just as important as knowing how to use it.

    Knowing when or where it’s appropriate to use a technique or tool is just as important as knowing ho ...

  3. ibatis.net：第四天，Update 和 Delete

    xml <update id="UpdateOrder" parameterClass="Order"> UPDATE [Orders] SET C ...

  4. html效果增强

    1:提示框 http://keleyi.com/keleyi/phtml/jqplug/ 2:loading效果 <script>function showPage(){    $('#d ...

  5. 指定nvm的默认版本号

    nvm alias default 8.9.4

  6. 【没有注意过的细节】用scanf读一个unsigned char? %hhu 的用法

    头段时间我的代码,有一个 unsigned char,我需要从sscanf 中读取字符串为这个值.但是一般char 是用%c的,我是要值得. 所以我使用了%d %u来读,结果报警告: unsigned ...

  7. 用SLF4j/Logback打印日志-3

    在 用SLF4j/Logback打印日志-1 和 用SLF4j/Logback打印日志-2 中分别介绍了Logback记录日志的基本原理并重点介绍了输出源配置.本篇介绍一些性能和技巧性的东西. 性能 ...

  8. 诺基亚S40手机联系人导入安卓手机

    电话号码较少的话比较简单,拷贝到SIM卡中通过SIM卡中转,只是一般SIM卡只能存储200个左右,联系人比较多的情况就麻烦一点,今天帮导师把诺基亚5220中的800个电话转到三星S4中,综合下来还是使 ...

  9. c++ 如何编写接口类(interface)

    接口类简介: 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法. 用c++实现接口类时需要 ...

  10. 计算机中的概念: 视图 VS 镜像

    这两个概念还是不太一样的.下面来说说个人的理解,记录一下. 1. 镜像 镜像可以理解为一份完全一样的拷贝.也就是"深度拷贝",一个复制品. 比如 iso映像文件,ubuntu-12 ...