如何封装一个支持长尾词的JavaScript缓动动画函数？

本文共计1026个文字，预计阅读时间需要5分钟。

原文示例为：本文字例为家庭分享了JavaScript缓动动画函数的封装代码，供大家参考。具体内容如下：本文字将从封装缓动动画的以下几个部分进行封装（1、单个属性，2、多个属性，3、动画框架之回调）。

改写后的内容：家庭分享了JavaScript动画函数封装代码，包含以下部分封装：单个属性、多个属性、动画框架回调。

本文实例为大家分享了JavaScript缓动动画函数的封装代码，供大家参考，具体内容如下

本文将从封装缓动动画的以下几个部分进行封装（1、单个属性，2、多个属性，3、缓动框架之回调函数，4、缓动框架之层级与透明度）

首先：获取元素样式的兼容方式

function getStyle(ele,attr){ //获取任意类型的CSS样式的属性值 if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; } return ele.currentStyle[attr]; }

封装单个属性

function animate(ele,attr,target){ //元素（box） 样式（left） 目标值（400） clearInterval(ele.timer); //使用定时器时，先清除定时器，防止多个定时器并行 ele.timer = setInterval(function(){ //先定义一个当前值 var leader = parseInt(getStyle(ele,attr)) || 0; //当这个样式为空时设置为0，获取来的样式值要取整。