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. [转]过XX游戏驱动保护的代码

    这个是过TX游戏自我保护驱动的源代码.可以过qq堂.DNF.寻仙等QQ游戏. #include <ntddk.h>#include <windef.h>#include < ...

  2. 使用 MVVMLight 命令绑定（转）

    继上一篇文章的项目,我们实现了数据绑定到界面中.这篇文章我们将实现把命令绑定到按钮上,在XAML中的Button之类的都会有个Command属性可以让我们来绑定命令使用. 首先我们要实现的目标是,在界 ...

  3. java根据模板HTML动态生成PDF

    原文:https://segmentfault.com/a/1190000009160184 一.需求说明:根据业务需要,需要在服务器端生成可动态配置的PDF文档,方便数据可视化查看. 二.解决方案: ...

  4. 在 Spring 4.3.9下升级 Velocity 1.7.x to Velocity 2.0.x 出现的问题

    1: Spring 的  spring-context-support 报错 java.lang.NoClassDefFoundError: org/apache/velocity/runtime/l ...

  5. EditText添加表情

    package com.kale.edittext02; import java.lang.reflect.Field; import java.util.Random; import android ...

  6. Python 模块 re （Regular Expression）

    使用 Python 模块 re 实现解析小工具   概要 在开发过程中发现,Python 模块 re(Regular Expression)是一个很有价值并且非常强大的文本解析工具,因而想要分享一下此 ...

  7. 5.2 dubbo-compiler源码解析

    ExtensionLoader<Protocol> loader = ExtensionLoader.getExtensionLoader(Protocol.class); final P ...

  8. 非常精简的Linux线程池实现（一）——使用互斥锁和条件变量

    线程池的含义跟它的名字一样,就是一个由许多线程组成的池子. 有了线程池,在程序中使用多线程变得简单.我们不用再自己去操心线程的创建.撤销.管理问题,有什么要消耗大量CPU时间的任务通通直接扔到线程池里 ...

  9. Solr4.4入门，介绍Solr的安装、IK分词器的配置及高亮查询结果(转)

    一.Windows下安装solr-4.4.0 1.  下载solr.4.4 2.  下载绿色版tomcat6.0.18 3.  解压下载的solr到d:\study\solr,将dist目录下的sol ...

  10. maskrcnn_benchmark代码分析(2)

    maskrcnn_benchmark训练过程 ->训练命令: python tools/train_net.py --config-file "configs/e2e_mask_rcn ...