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="请输入一个 ...
随机推荐
- 解决Java调用Azure SDK证书错误javax.net.ssl.SSLHandshakeException
Azure作为微软的公有云平台,提供了非常丰富的SDK和API让开发人员可以非常方便的调用的各项服务,目前除了自家的.NET, Java, Python, nodeJS, Ruby,PHP等语言都提供 ...
- 你应该知道的CSS文字大小单位PX、EM、PT[转]
摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...
- PM产品经理练级攻略（1-5等级）
大家都叫“PM”,但做的事情却完全不同? “PM”这个词到底是什么意思? 这个话题恐怕也是各位同行都一直在想,也一直想不清楚的吧,我也是. 每次看到各种“产品经理的能力模型”,我都觉得有点扯淡,总觉得 ...
- openGL 初试 绘制三角形 和添加鼠标键盘事件
code: #include <gl/glut.h> #include <stdlib.h> void render(void); void keyboard(unsigned ...
- __declspec,__cdecl,__stdcall都是什么意思？有什么作用？
__cdecl和__stdcall都是函数调用规范(还有一个__fastcall),规定了参数出入栈的顺序和方法,如果只用VC编程的话可以不用关心,但是要在C++和Pascal等其他语言通信的时候就要 ...
- linux grep练习
1.显示/proc/meminfo文件中以不区分大小的s开头的行: 2.显示/etc/passwd中以nologin结尾的行; 3.显示/etc/inittab中以#开头,且后面跟一个或多个空白字符, ...
- < meta > 元素（转）
< meta > 元素 概要 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 we ...
- Zepto.js touch模块深入分析 解决手机点击事件
源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...
- uva 10366 Faucet Flow
题意: 给出l和r,然后从l坐标到r坐标每隔两个位置有一个档板,给出挡板的高度,然后想(-1, 1)中间加水,问什么时候会溢出. 分析: 两边先找到距离(-1,1)最近的最大值L和R.接着比较两个L和 ...
- IBATIS处理typeHandler类容易范的SQLException总结
1. java.sql.SQLException: 无效的列类型 原因: A. ibatis的IN,OUT参数.或者typeHandler类中传入的参数值数据类型与Oracle自定义对象中的属性值的数 ...