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="请输入一个 ...
随机推荐
- spark快速入门之最简配置 spark 1.5.2 hadoop 2.7 配置
配置的伪分布式,ubuntu14.04上 先配置hadoop,参见这个博客,讲的很好 http://www.powerxing.com/install-hadoop/, 但是我在配的过程中还是遇到了问 ...
- C语言的本质（22）——C标准库之字符串操作
编译器.浏览器.Office套件等程序的主要功能都是符号处理,符号处理功能在程序中占相当大的比例,无论多复杂的符号处理都是由各种基本的字符串操作组成的,下面介绍如何用C语言的库函数做字符串初始化.取长 ...
- C语言的本质（16）——函数接口的传入参数与传出参数
如果函数接口有指针参数,既可以把指针所指向的数据传给函数使用(称为传入参数),也可以由函数填充指针所指的内存空间,传回给调用者使用(称为传出参数),例如strcpy的函数原型为 char *strcp ...
- Unix/Linux环境C编程入门教程(22) C/C++如何获取程序的运行时间
1.问:知道程序运行时间我们可以做什么? 在<C++应用程序性能优化>一书中,如果大家读过相信大家一定对性能优化这一块非常上心,文中总是对优化前后的时间对比非常直观给我们一个感受. 那么我 ...
- Serv-U无法连接到服务器127.0.0.1，端口43958 FTP服务器不能启动
端口43958,这是Serv-U的本地管理端口,只允许127.0.0.1连接. 在出现“Serv-U无法连接到服务器127.0.0.1,端口43958”这个错误的时候,一般ftp软件无法自动启动 ...
- matlab---边缘之sobel简单实例
最近在项目中需要做一些图像边缘检测的工作,但是由于之前没接触过图像处理的相关知识,所以只得 在matlab里面对一些图像处理函数挨个挨个的试着用.在用的过程中在慢慢的明白了一些简单的图像处 理方法. ...
- sriov查看pf-vf对应关系
自己写的, 方便调试. $ cat pf-vf echo "physfn is $1"echo "pf info:"ls /sys/class/net/$1 - ...
- cocos2dx lua 学习笔记（一）
macosx 安装 lua curl -R -O http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxf lua-5.1.4.tar.gz cd lua-5.1 ...
- C#字符串处理 及字符串格式化
本文来自:http://www.cnblogs.com/xuerongli/archive/2013/03/23/2976669.html string字符串是char的集合,而char是Unicod ...
- paip.navicat form mysql导入文本文件时CPU占用100%的解决
paip.navicat form mysql导入文本文件时CPU占用100%的解决 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:h ...