js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装
1.
offsetParent 获取的最近的定位的父元素
offsetLeft/offsetTop 是相对于offsetParent的距离
offsetHeight/offsetWidth 获取盒子的大小 border + height + padding
<style>
#box {
width: 200px;
height: 200px;
background-color: #ff0000; }
#child {
width: 100px;
height: 100px;
margin-left: 10px;
background-color: #00ff00;
}
</style>
</head>
<body>
<!--offsetParent--> <div id="box"> <div id="child"> </div> </div> <script>
var child = document.getElementById("child");
//border + padding + width
//offsetLeft获取的是相对于offsetParent的距离
console.log(child.offsetLeft);
//如果设置的子盒子有定位的父元素，offsetParent就是定位的父元素
//此处子盒子的父元素没有定位，offsetParent就是body
console.log(child.offsetParent);
//父节点--box
console.log(child.parentNode);
</script>
2 scrollHeight 滚动内容的高度（height + padding 不包括边框）
<style>
#box{
width: 100px;
height: 100px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div id="box">
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈
</div>
<script>
function $$(id){
return document.getElementById(id);
}
</script>
<script>
var box=$$("box");
console.log(box.scrollHeight);
//获取撑开的大小
console.log(box.offsetHeight);
//获取盒子的大小
</script>
注册 onscroll 滚动事件
<script>
// var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
//滚动条事件
window.onscroll=function(){
console.log(scroll().scrollTop);
} </script>
//4 获取页面滚动出去的距离
//document.body.scrollLeft ||
document.documentElement.scrollLeft
//document.body.scrollTop ||
document.documentElement.scrollTop
这里会产生浏览器的兼容问题，ie8记一下版本不支持document.body.scrollLeft,只支持document.documentElement.scrollLeft因此我们需要封装这个函数
/**scrollTop与scrollLeft兼容性封装
*
* @returns {{scrollTop: number, scrollLeft: number}}
*/
function scroll(){
return{
scrollTop:document.body.scrollTop||document.documentElement.scrollTop,
scrollLeft:document.body.scrollLeft||document.documentElement.scrollLeft
};
}
动画函数的封装
//获取任意样式
function getStyle(element, attr) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null)[attr];
}else{
return element.currentStyle[attr];
}
}
//在修改单个属性的基础上修改
//1 修改参数，传入对象
//2 遍历对象，获取到所有的属性
//3 把target修改 成 attrs[attr] function animate(element, attrs, fn) {
//清除定时器
if(element.timerId) {
clearInterval(element.timerId);
} element.timerId = setInterval(function () {
//问题：当多个属性的最小值到达之后，动画就会停止
//解决：当所有属性都到达目标值，动画停止 //假设所有的属性都到达目标值，停止定时器
var isStop = true;
//遍历多个属性
for(var attr in attrs) { if(attr === "zIndex") {
element.style[attr] = attrs[attr];
}else if(attr === "opacity") {
//获取当前元素样式属性的值
var current = parseFloat(getStyle(element, attr)) || 0;
current *= 100;
//每一次step的值会越来越小
var step = (attrs[attr]*100 - current)/8; //三目运算符判断步长为正数向上取整 如果为负数向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step); current += step; element.style[attr] = current/100; //更改ie下的透明度（透明度的兼容问题）
element.style.filter = "alpha(opacity="+ current +")"; //如果有一个属性没有到达目标值，不能停止动画
if(step != 0) {
isStop = false;
}
}else{
//获取当前元素样式属性的值
var current = parseInt(getStyle(element, attr)) || 0;
//每一次step的值会越来越小
var step = (attrs[attr] - current)/8; //正数 向上取整 负数 向下取整
step = step > 0 ? Math.ceil(step): Math.floor(step); current += step; element.style[attr] = current + "px"; //如果有一个属性没有到达目标值，不能停止动画
if(step != 0) {
isStop = false;
}
} } //停止定时器
js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装的更多相关文章
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- 《JS权威指南学习总结--8.7 函数属性、方法和构造函数》
内容要点: 在JS程序中,函数是值.对函数执行typeof运算会返回字符串 "function",但是函数是JS中特殊的对象.因为函数也是对象,它们也可以拥有属性和方法,就像普 ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- 《JS权威指南学习总结--8.6 函数闭包》
内容要点: 和其他大多数现代编程一样,JS也采用词法作用域,也就是说,函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用时决定的. 为了实现这种词法作用域,JS函数对象的内部状 ...
- 《JS权威指南学习总结--8.3 函数的实参和形参》
内容要点: 一.可选形参 当调用函数的时候传入的实参比函数声明时指定的形参个数要少,剩下的形参都将设置为undefined值. 例如: //将对象o中可枚举的属性名追加至数组 //如果省略a,则创建一 ...
- 《JS权威指南学习总结--第八章 函数》
内容要点: 一.JS函数是参数化的:函数的定义会包括一个称为形参的标识符列表,这些参数在函数体中像局部变量一样工作.函数调用会为形参提供实参的值.函数使用它们实参的值来计算返回值,成为该函数调用表达式 ...
- 移动端滑屏全应用【四】移动端动画贞动画函数mTween封装
首先此函数是基于大家都知道的Tween动画算法的,在此基础上使用了三中讲到的兼容版动画贞,可以使动画变得更流畅. 1. 首先要记得引入Tween.js 2. 引入mTween.js 3. 调用 * m ...
- Node.js用ES6原生Promise对异步函数进行封装
Promise的概念 Promise 对象用于异步(asynchronous)计算..一个Promise对象代表着一个还未完成,但预期将来会完成的操作. Promise的几种状态: pending:初 ...
- js callee,caller学习
原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...
随机推荐
- C++设计模式-Builder建造者模式
作用:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. Builder模式和AbstractFactory模式在功能上很相似,因为都是用来创建大的复杂的对象,它们的区别是:B ...
- Windows 下动态链接库和静态链接库
1.静态链接库:就是在编译的时候把库中代码复制进工程中,导致工程变大,但是速度快. 缺点在于一套代码可能在内存中有多份拷贝,占用内存. 2.动态链接库:库由windos api加载库代码,内存中只有一 ...
- Android RadioGroup设置默认选中项
今天有人问.Android 里面 RadioGroup里面有两个RadioButton怎么设置默认值? 第一个RadioButton设置 android:checked="true" ...
- Android BaseAdapter的使用
数据适配器有很多种,今天在这里记录一下最通用是适配器BaseAdapter. 首先说一下什么是适配器,这里我从网上找到一幅图片 由上图我们不难看出,所谓的适配器,就是数据与视图之间的桥梁.由它把数据绑 ...
- python笔记一
好奇,想一探究竟.安装就出点小问题,win7,64位,一直卡在这里不动了? 只好取消.第二天安装仍是如此. 于是下载Windows6.1-KB2999226-x64.msu,安装,仍卡顿不动: 于是找 ...
- 碎片事物的提交 commitAllowingStateLoss()
转:http://blog.csdn.net/kaiqiangzhang001/article/details/42241441 下边两个问题,是在开发中碰到的一些关于Fragment的偶发性的问题, ...
- 开发《基于Arcgis Online的家政管理服务信息系统》随笔1
1.在webservice中写的方法参数里面含有数组,如:public DataTable AdvSearch1(int ServiceArea, params string[] nas), 在发布之 ...
- eclipes（小白）快捷键
Ctrl+shift+l :自动列出全部快捷键 alt+/ :内容助理 Ctrl+1. :快速修复 Ctrl+shift+o ...
- mysql主从复制的一篇文章（转载）
管理mysql主从有2年多了,管理过200多组mysql主从,几乎涉及到各个版本的主从,本博文属于总结性的,有一部分是摘自网络,大部分是根据自己管理的心得和经验所写,整理了一下,分享给各位同行,希 ...
- CentOS6 vsftpd 安装及优化方法
我在每次配置ftp的时候都会一头雾水,一直也没总结一份特别完整有效的方法出来,这次特别记录一下,以备以后使用 1.安装vsftpd yum -y install vsftpd chkconfig vs ...