# 元素偏移量 offset 系列

# offset 概述

offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移），大小等

获取元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值不带单位

offset 系列	作用
element.offsetParent	返回作为元素带有定位的父级元素，如果父级都没有定位返回 body
element.offsetTop	返回元素相对带有定位父元素上方偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括 padding，边框，内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括 padding，边框，内容区的高度，返回数值不带单位

# offset 和 style 区别

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含 padding+border+width	style.width 获得不包含 padding 和 bottom 的值
offsetWidth 等属性只是可读，只能获取不能赋值	style.width 是可读写属性，可以获取也可以赋值
我们要想获取元素大小位置，offset 合适	我们要想给元素改值，style 合适

# 元素可视区 cilent 系列

# 概述与常用方法

cilent 翻译过来就是客户端，我们使用 cilent 系列的相关属性来获取元素可视区的相关信息，通过 cilent 系列的相关属性可以动态的得到元素的边框大小，元素大小等

cilent 系列属性	作用
element.cilentTop	返回元素上边框的大小
element.cilentLeft	返回元素左边框的大小
element.cilentWidth	返回自身包括 padding，内容区的宽度，不包含边框，饭 hi 数值不带单位
element.cilentHeight	返回自身包括 padding，内容区的高度，不含边框，返回数值不带单位

# 立即执行函数

	<script>
	(function(a,b){
	console.log(a + b);
	})(1,2);
	(function(a,b){
	console.log(a + b);
	}(2,3))
	</script>

# 元素滚动 scroll 系列

# 元素 scroll 系列属性

scroll 翻译过来是滚动的，我们使用 scroll 系列的相关属性可以动态的得到元素的大小，滚动的距离等等

scroll 系列属性	作用
element.scrollTop	返回被卷去上侧边距，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不带边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

# 动画函数封装

# 动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

获得盒子当前位置
让盒子在当前位置上加上 1 个移动距离
用定时器不断执行操作
加一个结束定时器事件
注意元素需要添加定位

# 动画函数封装

注意函数需要传递 2 个参数，动画对象和移动到的距离

	function animate(obj,target) {
	clearInterval(obj.timer); // 清除之前的定时器防止多个定时器运行
	obj.timer = setInterval(function(){
	if(obj.offsetLeft >= target){
	clearInterval(timer);
	}
	obj.style.left = obj.offsetLeft + 1 + 'px';
	},30);
	}

# 缓动效果原理

缓动效果就是让元素运动速度有所变化，最常见的就是让速度慢下来

思路

让盒子每次移动的距离慢慢变小，苏剧就会慢慢落下来
核心算法：（目标值 - 现在位置）/ 10 作为每次移动的距离的步长
停止的条件是：让盒子当前位置等于目标现在位置
注意步长需要取整

	function animate(obj,target) {
	clearInterval(obj.timer); // 清除之前的定时器防止多个定时器运行
	var temp = (target - obj.offsetLeft) / 10;
	obj.timer = setInterval(function(){
	if(obj.offsetLeft >= target){
	clearInterval(timer);
	}
	obj.style.left = obj.offsetLeft + temp + 'px';
	},30);
	}

# 动画函数多个目标值之间移动

可以让动画从 800 移动到 500

当我们点击按钮的时候，判断步长是正值还是负值

如果是正值，则步长往大了取整
如果是负值，则步长向小了取整

# 动画函数添加回调函数

回调函数原理：

函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去这个函数，这个过程就叫做回调

	btn2.addEventListener('click',function(){
	animate(span,800,function(){
	span.style.backgroundColor = 'red';
	});
	});

	function animate(obj,target,callback) {
	clearInterval(obj.timer); // 清除之前的定时器防止多个定时器运行

	obj.timer = setInterval(function(){
	var temp = (target - obj.offsetLeft) / 10;
	var step = temp > 0 ? Math.ceil(temp) : Math.floor(temp);
	if(obj.offsetLeft == target){
	clearInterval(obj.timer);
	if(callback) {
	callback();
	}
	}
	obj.style.left = obj.offsetLeft + step + 'px';

	},30);
	}

# 动画函数封装到单独 JS 文件里

	function animate(obj, target, callback) {
	//console.log (callback); callback = function () {} 调用的时候 callback ()

	// 先清除以前的定时器，只保留当前的一个定时器执行
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
	// 步长值写到定时器的里面
	// 把我们步长值改为整数不要出现小数的问题
	// var step = Math.ceil((target - obj.offsetLeft) / 10);
	var step = (target - obj.offsetLeft) / 10;
	step = step > 0 ? Math.ceil(step) : Math.floor(step);
	if (obj.offsetLeft == target) {
	// 停止动画本质是停止定时器
	clearInterval(obj.timer);
	// 回调函数写到定时器结束里面
	// if (callback) {
	// // 调用函数
	// callback();
	// }
	callback && callback();
	}
	// 把每次加 1 这个步长值改为一个慢慢变小的值步长公式：(目标值 - 现在的位置) / 10
	obj.style.left = obj.offsetLeft + step + 'px';

	}, 15);
	}

JavaScript

# 元素偏移量 offset 系列

# offset 概述

# offset 和 style 区别

# 元素可视区 cilent 系列

# 概述与常用方法

# 立即执行函数

# 元素滚动 scroll 系列

# 元素 scroll 系列属性

# 动画函数封装

# 动画实现原理

# 动画函数封装

# 缓动效果原理

# 动画函数多个目标值之间移动

# 动画函数添加回调函数

# 动画函数封装到单独 JS 文件里

jQuery

本地存储