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. Java链式异常

    以下实例演示了使用多个 catch 来处理链试异常:public class Main { public static void main (String args[])throws Exceptio ...

  2. Java Calendar,Date,DateFormat,TimeZone,Locale等时间相关内容的认知和使用(1) Calendar

    Java 操作日期/时间,往往会涉及到Calendar,Date,DateFormat这些类. 最近决定把这些内容系统的整理一下,这样以后使用的时候,会更得心应手.本章的内容是主要讲解“Java时间框 ...

  3. 咏南中间件新增MORMOT移动端演示

    咏南中间件新增MORMOT移动端演示 基于FMX,支持安卓.IOS移动端. 1)使用INDY 的HTTP控件进行查询: procedure TForm1.查询1Click(Sender: TObjec ...

  4. EBS 系统当前完成请求时间监测

    /* Formatted on 2018/3/14 23:32:17 (QP5 v5.256.13226.35538) */ SELECT REQUEST_ID , PROGRAM , ROUND ( ...

  5. Ubuntu下 ssh : connect to host localhost port 22:Connection refused

    Ubuntu下测试ssh时使用ssh localhost 命令,出现错误提示connect to host localhost port 22:Connection refused 造成这个错误的原因 ...

  6. Unity3d-Particle System系统的学习（一）

    最近看了下Unity3d的粒子系统的相关视频,并且动手操作了下,感觉自己的美工技能又增进了下(开个小玩笑),发现粒子系统所需要记忆的东西还是有点多的. 所以为了不让自己遗忘某些知识点,我准备发布成博客 ...

  7. lemon OA 我长时间经历的第一个开源项目

    对于原作者来说, 他长时间运营了一个项目,lemon OA .目前,八百多star.在运营这个项目的过程中,我想说,他成了activiti 目前国内比较牛逼的几个人.还有 spring securit ...

  8. Mac与Mac之中的共享方式

    前往 ---> 连接服务器  ---> 输入smb://带连接的服务器地址(smb://192.168.1.40)即可

  9. cocos2d-x 3.0rc1 编译cpp-testsproject

    1.进入cocos2d-x的build文件夹 2.打开一个cmd命令行窗体,输入 android-build.py cpp-tests 然后回车

  10. git error: RPC failed; curl 56 GnuTLS recv error 解决方案

    // git 报错情况: error: RPC failed; curl 56 GnuTLS recv error (-110): The TLS connection was non-properl ...