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. JPA & Hibernate 注解

    1 . @Entity(name="EntityName") 必须 ,name 为可选 , 对应数据库中一的个表 2 . @Table(name="",cata ...

  2. Select、Poll与Epoll比較

    (1)select select最早于1983年出如今4.2BSD中,它通过一个select()系统调用来监视多个文件描写叙述符的数组.当select()返回后,该数组中就绪的文件描写叙述符便会被内核 ...

  3. poj 3071 Football（概率dp）

    id=3071">http://poj.org/problem? id=3071 大致题意:有2^n个足球队分成n组打比赛.给出一个矩阵a[][],a[i][j]表示i队赢得j队的概率 ...

  4. Thinking in Java---异常处理机制

    java的异常处理机制能够使程序有极好的容错性,让程序更加的健壮.所谓的异常,就是指的阻止当前方法或作用域继续运行的问题,,当程序运行时出现异常时,系统就会自己主动生成一个Exception对象来通知 ...

  5. Java里多个Map的性能比较（TreeMap、HashMap、ConcurrentSkipListMap）

    比较Java原生的 3种Map的效率. 1.  TreeMap 2.  HashMap 3.  ConcurrentSkipListMap 模拟150W以内海量数据的插入和查找,通过增加和查找两方面的 ...

  6. SharePoint Designer 配置工作流后需要重启的问题

    前言 最近,很多朋友配置SharePoint工作流以后,用SharePoint Designer打开站点,创建SharePoint 2013 工作流的时候,都会报一个错误. 查了很多帖子,发现是个De ...

  7. 波吉亚家族第一季/全集The Borgias 1迅雷下载

    波吉亚家族 第一季 The Borgias Season 1 (2011)本季看点:<波吉亚家族>是一个非常复杂的故事,是现代人描绘这个臭名昭著的王朝家族过往历史的一副有趣又坦率的肖像画. ...

  8. Orchard模块开发全接触8：改造后台

    后台默认提供了 Content 的管理,但是,所有的内容类型揉杂在一起,而我们需要更深度的定制一些功能,比如,我们只想管理订单,又比如,我们需要对注册用户进行管理.本篇的内容包括: 1:自定义 adm ...

  9. information_schema系列九

    information_schema系列九   1:INNODB_SYS_FOREIGN 这个表存储的是INNODB关于外键的元数据信息 Column name Description ID 外键的名 ...

  10. Forward secrecy

    In cryptography, forward secrecy (FS), also known as perfect forward secrecy (PFS), is a property of ...