用JS 封装类似于JQ中animate的动画效果

前言：现在网上对这种类似的代码繁多，但是都是各家所长，希望源码时代H5前端讲师写的代码能够帮助到需要这样效果的朋友。

首先说一下，这篇文章对初学者有很大的帮助，特别是在学习原生JS的初学者，能够帮助你们能够更好的建立好良好的思路和对原生JS的更深一步的了解。废话我们就不多说了。

首先看一下我们要实现什么功能吧。

一个是：运动到固定的距离；

一个是：宽度变为一定宽度；

因为代码里面注释更能帮助到更多的朋友，所以这里就不单独做参数解释了。

废话那么多我们直接上代码；

HTML

运动到400

宽度变为400

Css

div {

position: absolute;

width: 100px;

height: 100px;

background-color: pink;

}

核心js:

var btnArr = document.getElementsByTagName("button");

var div = document.getElementsByTagName("div")[0];

btnArr[0].onclick = function () {

animate(div, "left", 400);

}

btnArr[1].onclick = function () {

animate(div, "width", 400);

}

//参数变为3个

function animate(ele, attr, target) {

//先清定时器

clearInterval(ele.timer);

ele.timer = setInterval(function () {

//四部

var leader = parseInt(getStyle(ele, attr)) || 0;//获取值可能含有px，我们只取数字部分parseInt()

//1.获取步长

var step = (target - leader) / 10;

//2.二次加工步长

step = step > 0 ? Math.ceil(step) : Math.floor(step);

leader = leader + step;

//3.赋值

ele.style[attr] = leader + "px";

//4.清除定时器

if (Math.abs(target - leader)

ele.style[attr] = target + "px";

clearInterval(ele.timer);

}

}, 25);

}

//兼容方法获取元素样式

function getStyle(ele, attr) {

if (window.getComputedStyle) {

return window.getComputedStyle(ele, null)[attr];

}

return ele.currentStyle[attr];

}

以上就是我们实现小动画效果的代码，针对参数这块呢相对而言比较单一，这段代码呢一般是针对入门级的朋友，希望能够给您带来帮助，后续我还会更新参数稍微复杂一点的效果，希望您的持续关注。