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. SQLServer2008:在查看表记录或者修改存储过程时出现错误。错误消息为: 目录名无效

    登陆数据库后,右键打开表提示:目录名无效,执行SQL语句也提示有错误,本来想重装的这个肯定能解决,但是这个方法真的不视为上上策啊,于是在网上找到了这个解决办法,还真是立即见效啊!分享给大家,希望有帮助 ...

  2. ios nil、NULL和NSNull 的使用

    nil用来给对象赋值(Objective-C中的任何对象都属于id类型),NULL则给任何指针赋值,NULL和nil不能互换,nil用于类指针赋值(在Objective-C中类是一个对象,是类的met ...

  3. Linux学习18-gitlab新建项目提交代码

    前言 gitlab前面已经搭建好了,如果我们想用把代码上传到gitlab仓库上的话,先要新建一个项目仓库.然后本地安装git环境,就可以提交了 root用户 gitlab首次在浏览器上打开web页面, ...

  4. rtsp实现的开源代码

    * live.com   C/S   C++   http://www.live555.com * darwin     S     C++   http://www.opensource.apple ...

  5. Tomcat集群下获取memcached缓存对象数量，统计在线用户数据量

    项目需要统计在线用户数量,系统部署在集群环境下,使用会话粘贴的方式解决Session问题.要想得到真实在线用户数,必须是所有节点的总和. 这里考虑使用memcached存放用户登录数据,key为use ...

  6. Windows下LuaJIT的编译和使用

    1.下载LuaJIT,download>> 2.编译 开始 –> 程序 –> Microsoft Visual Studio xx –> Visual Studio To ...

  7. Unable to execute dex: Multiple dex files define 的解决方法

    我们在引入library时可能会出现这个错误 比如: [2013-11-05 14:22:15 - Dex Loader] Unable to execute dex: Multiple dex fi ...

  8. Calendar获取当天的初始时间，当月的初始时间，当年的初始时间

    如下:

  9. 使用SpringBoot的关于页面跳转的问题

    示例如下: @Controller public class UserController { @Resource UserService userService; @RequestMapping(& ...

  10. 使用kubectl创建部署

    本文使用自己利用VirtubalBox搭建的集群环境,暂时只有一个Master.一个Node.如果想了解集群的搭建,可以参考我的文章离线环境安装Kubernetes集群以及使用kubeadm安装kub ...