javaScript pc端网页动画特效已经简单的动画函数封装

元素偏移量offset系列

offse概述

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

1. 获得元素距离带有定位父元素的位置
2. 获得元素自身的大小（宽度和高度）

注意：返回的数值都不带单位

offset系列常用属性：

offset系列属性	作用
Element.offsetParent	返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body
Element.offsetTop	返回元素相对带有定位父元素上方的距离。父级都没有定位则返回与body上方的距离
Element.offsetLeft	返回元素相对带有定位父元素左侧的距离。父级都没有定位则返回与body左侧的距离
Element.offsetWidth	返回自身包括padding+边框+自身宽度的总宽度
Element.offsetHeight	返回自身包括padding+边框+自身高度的总高度

元素可视区client系列

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

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度不包含边框，返回值不带单位
element.clientHeight	返回自身包括padding、内容区的高度不包含边框，返回值不带单位

scroll系列

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

scroll系列属性	作用
Element.scrollTop	返回被卷上去的距离，返回数值不带单位
Element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
Element.scrollWidth	返回自身实际的宽度，不包含边框，返回数值不带单位，如果内容超出盒子，则会加上超出内容的宽度
Element.scrollHeight	返回自身实际的高度，不包含边框，返回数值不带单位，如果内容超出盒子，则会加上超出内容的高度

页面被卷去多少获取

window.pageYOffset:页面被卷去的头部距离
window.pageXOffset：页面被卷去左侧的距离

三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不包含边框，返回数值不带单位
element.scrollWidth	返回自身实际宽度，不包含边框，返回数值不带单位，与上面的区别主要是盒子里面的内容超出盒子的大小则使用这个。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uK31Gw9Q-1585449197315)(/Users/lxllsy520/Library/Application Support/typora-user-images/image-20200328122138405.png)]

常用方法：

1. offset系列经常用于获取元素位置 offsetLeft offsetTop
2. client经常用于获取元素大小 clientWidth clientHeight
3. scroll经常用于获取滚动距离 scrollTop scrollLeft
4. 页面滚动的距离通过，window.pageXOffset 和 window.pageYOffset 获取

mouseenter和mouseover的区别

mouseenter 鼠标事件

1. 当鼠标移动到元素上时就会触发。
2. 类似mouseover，他们两者之间的差别是
3. mouseover鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter只会进过自身盒子才会触发
4. 之所以会这样就是因为mouseenter 不会冒泡
5. 跟mouseenter 搭配鼠标开的mouseleave同样不会冒泡

动画函数封装

动画实现原理

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

实现步骤：

1. 获得盒子当前位置
2. 让盒子在当前位置加上1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用element.style.left

简单的动画函数封装实例：

		/**
		 * @description:  动画封装函数
		 * @param 参数一：需要使用动画的元素对象
		 * @param 参数二：需要运动的水平距离
		 * @return: 
		 */
		function animate(obj, target) {
			//当我们不断的点击按钮，这个元素的速度回越来越快，因为开启了太多的定时器
			//解决方案就是让我们的元素只有一个定时器执行
			//所以先清除以前的定时器，只保留当前的一个定时器执行
			clearInterval(obj.timer);
			obj.timer = setInterval(function () {
				if (obj.offsetLeft >= target) {
					//定制动画 本质是停止定时器
					clearInterval(obj.timer);
				}
				obj.style.left = obj.offsetLeft + 1 + 'px';
			}, 30);
		}

常见的pc端动画函数封装

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的就是让他速度慢慢停下来。

思路：

1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2. 核心算法：(目标值-现在的位置) / 10 做为每次移动距离的步长
3. 停止条件是：让当前盒子位置等于目标位置就停止定时器。
4. 注意步长值需要向上取整

缓动动画函数封装

/**
 * @description:  动画封装函数
 * @param 参数一：需要使用动画的元素对象
 * @param 参数二：需要运动的水平距离
 * @param 参数三：为一个回调函数
 * @return: 
 */
function animate(obj, target, callBack) {
    //当我们不断的点击按钮，这个元素的速度回越来越快，因为开启了太多的定时器
    //解决方案就是让我们的元素只有一个定时器执行
    //所以先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        //设置步长值
        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();
            }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

缓动返回顶部动画封装

/**
 * @description: 缓动返回顶部动画函数
 * @param {*} obj  window  对象，固定
 * @param {*} target  移动到顶部的距离，直接填写数字
 * @param {*} callBack  动画完成后的回调函数，可以省略
 * 例子： backTopAnimate(window, 0); 即可
 */
function backTopAnimate(obj, target, callBack) {
    //当我们不断的点击按钮，这个元素的速度回越来越快，因为开启了太多的定时器
    //解决方案就是让我们的元素只有一个定时器执行
    //所以先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        //设置步长值
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            //定制动画 本质是停止定时器
            clearInterval(obj.timer);
            //回调函数写到定时器结束里面  可以简写成下面这样
            // if (callBack) {
            //     callBack();
            // }
            callBack && callBack();
        }
        //obj.style.left = obj.offsetLeft + step + 'px';
        //页面滚动事件需要用window.scroll(X,Y);
        window.scroll(0, window.pageYOffset + step);
    }, 15);
}