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="请输入一个 ...
随机推荐
- ASP.NET C# 有程序集加不了解决办法
在项目中添加app.config 获取在 web.config 添加 <?xml version="1.0"?> <configuration> <s ...
- 如何设置 Internal 类，方法，属性对其他项目可见
internal 修饰符时程序集内部其他类可见.但对程序集外的类不可见,这样就很好的封装了可见性. 但是,我们也许会碰到类似的情况,特别是基于已有代码开发新的代码时,你会发现很多 internal 的 ...
- 環氧樹脂對COB的影響
COB的封膠一般使用單液 Epoxy(環氧樹脂),也可以使用雙液(Epoxy+硬化劑),雙液的成品品質可靠度雖然比較高,但是保存及維護非常麻煩,所以一般的 COB 都還是採用單液的製程. 其次是如何控 ...
- Chapter 4. Button, Checkbutton, and Radiobutton Widgets 按钮,复选按钮,单选按钮
Chapter 4. Button, Checkbutton, and Radiobutton Widgets 按钮,复选按钮,单选按钮 几乎所有的Perl/Tk 应用使用按钮以这样或者那样的方式 ...
- （十）boost库之多线程
(十)boost库之多线程 1.创建线程 使用boost库可以方便的创建一个线程,并提供最多支持9个参数的线程函数,相对于void*来说,方便了很多,创建线程主要提供了一下3种方式: 线程库头文件:# ...
- 解决WEB页面上"焦点控制"一法
解决WEB页面上"焦点控制"一法 分类: Html/Css2011-11-11 17:28 125人阅读 评论(0) 收藏 举报 webjavascriptasp.netbutto ...
- linux 下使用 tc 模拟网络延迟和丢包(转)
1 模拟延迟传输简介 netem 与 tc: netem 是 Linux 2.6 及以上内核版本提供的一个网络模拟功能模块.该功能模块可以用来在性能良好的局域网中,模拟出复杂的互联网传输性能,诸如低带 ...
- 如何优化pom依赖项？
Maven工程通过pom.xml里的<dependency>来定义依赖项.当然,我们不会少定义依赖项,否则编译不通过.不过,如果我们多定义了依赖项虽然不会造成灾难,但可能会造成一些问题,比 ...
- Codeforces 482B Interesting Array(线段树)
题目链接:Codeforces 482B Interesting Array 题目大意:给定一个长度为N的数组,如今有M个限制,每一个限制有l,r,q,表示从a[l]~a[r]取且后的数一定为q,问是 ...
- 【枚举+贪心】【TOJ3981】【ICPC Balloons】
给你N种不同颜色气球,每种气球有个数目 count[i],给的同种颜色气球可能是L尺寸,或M尺寸. M个问题,每个问题有个解决人数ac[i]. 每个问题 要分配一种颜色的气球,尺寸要一样 现在 这些气 ...