getBoundingClientRect()来获取页面元素的位置”
getBoundingClientRect()来获取页面元素的位置”
获取的是一个对象;
延伸阅读;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#w3124{
width: 100px;
height:100px;
background:#f45;
position: absolute;
left:100px;
}
#w3124.totes-at-the-end{
top: 200px;
}
#w3124.animate-on-transforms{
transition: all 1s; }
</style>
</head>
<body>
<div id="w3124" class=""> </div>
<script>
console.log(document.getElementById("w3124").getBoundingClientRect());
var el = document.getElementById("w3124");
function tidyUpAnimations(){
console.log(222)
}
// 获取初始位置
var first = el.getBoundingClientRect(); // 为元素指定一个样式，让元素在最终位置上
el.classList.add('totes-at-the-end'); // 获取最终位置
var last = el.getBoundingClientRect(); // 如果有必要也可以对其他样式进行计算，但最好坚持只进行 transform 和 opacity 相关的计算
var invert = first.top - last.top;
console.log(invert); // 反转
el.style.transform = 'translateY(' + invert + 'px)'; // 等到下一帧，也就是其他所有的样式都已经被应用
requestAnimationFrame(function() { // 添加动画相关的设置
el.classList.add('animate-on-transforms'); // 开始动画
el.style.transform = '';
},5000); // 结束时清理
el.addEventListener('transitionend', tidyUpAnimations);
</script>
</body>
</html>
getBoundingClientRect()来获取页面元素的位置”的更多相关文章
- getBoundingClientRect() 来获取页面元素的位置
getBoundingClientRect() 来获取页面元素的位置 document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syn ...
- 用getBoundingClientRect()来获取页面元素的位置
以前绝大多数的使用下面的代码来获取页面元素的位置: [code="javascript"]var _x = 0, _y = 0;do{_x += el.offsetLeft;_y ...
- 用Javascript获取页面元素的位置
制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...
- js获取页面元素的位置
一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页 ...
- 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- 用javaScript获取页面元素值
用JavaScript获取页面元素常见的三种方法: getElementById() ...
- Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同
一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...
随机推荐
- Nginx 配置指令的执行顺序（四）
ngx_lua 模块提供了配置指令 access_by_lua,用于在 access 请求处理阶段插入用户 Lua 代码.这条指令运行于 access 阶段的末尾,因此总是在 allow 和 deny ...
- Nginx 变量漫谈（七）
在 (一) 中我们提到过,Nginx 变量的值只有一种类型,那就是字符串,但是变量也有可能压根就不存在有意义的值.没有值的变量也有两种特殊的值:一种是“不合法”(invalid),另一种是“没找到”( ...
- 局域网内IP冲突怎么办
对于在Internet和Intranet网络上,使用TCP/IP协议时每台主机必须具有独立的IP地址,有了IP地址的主机才能与网络上的其它主机进行通讯.但IP地址冲突会造成网络客户不能正常工作,只 ...
- 加密芯片ALPU
加密芯片ALPU 纽文微电子(上海)有限公司 n 公司简介 NEOWINE是一家半导体开发公司,2002年6月成立于韩国,于2011年在中国设法人; 研发总部位于韩国京畿道,并在上海.深圳设办事处 ...
- USB HID复合设备实例—键盘+鼠标
实现这种USB HID复合设备有两种方法,在<USB HID协议入门>一节已经讲到其中一种方法,说一个USB HID设备可以包含多种功能的报告描述符合集,这样可以实现复合设备,如带鼠标功能 ...
- Sublime Text 3 Build 3047 32bit/64bit 简体中文安装破解版
Sublime Text 3 Build 3047 32bit/64bit 简体中文安装破解版 Sublime Text 3 Build 3047 32bit 简体中文安装破解版下载:http://y ...
- 深入了解 Flexbox 伸缩盒模型
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...
- mac系统奔溃无法启动时，如何备份重要资料
虽然说苹果系统以稳定性获得高度好评,但是作为一名程序员,还是要考虑到系统奔溃的情况. 当遇到系统奔溃,无法启动,而我们还没有备份电脑里面的重要资料,这时候不用着急.可以用下面的 方法来拯救你的苹果电脑 ...
- Adding Pagination 添加分页
本文来自: http://www.bbsmvc.com/MVC3Framework/thread-206-1-1.html You can see from Figure 7-16 that all ...
- HttpWebResponse请求状态代码
HttpWebResponse请求状态代码标识 成员名称 说明 Continue 等效于 HTTP 状态 100.Continue指示客户端可能继续其请求. SwitchingProtocols 等效 ...