这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
getBoundingClientRect() 来获取页面元素的位置
JS 实现拖动的方法有很多,在本文将为大家介绍下使用 getBoundingClientRect() 方法是如何实现的,感兴趣的朋友不要错过
- document.documentElement.getBoundingClientRect
该方法返回一个对象,从而获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,即分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角(注意,不是文档区域的左上角)的偏移像素值。并且该方法已经不再是 IE Only 了,FF3.0 + 和 Opera9.5 + 已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,所以获取页面上某个元素相对于浏览器窗口的偏移量就成了 getBoundingClientRect 的用武之地了,按照一篇文章的说法,it's awsome,太帅了 =。= 因为不必纠结于 offset、pagex、clientx 等等等等等等。在以前版本的 Opera 和 Firefox 中必须通过循环来获得元素在页面中的绝对位置。
代码示例:
- <span style="font-size:14px">
- <!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) < strong >
- var X = this.getBoundingClientRect().left + document.documentElement.scrollLeft;
- var Y = this.getBoundingClientRect().top + document.documentElement.scrollTop; < /strong>
- alert("Demo的位置是X:"+X+";Y:"+Y)
- }
- }
- /
- </script>
- </span>
来源: http://www.phperz.com/article/17/0626/278685.html