小白安全博客

小白记忆
专注网络安全

 用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];

}

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



来源链接:本文来自企鹅号 - 源码时代媒体

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏,请先点一下下面的付款方式

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

 您阅读这篇文章共花了:

打赏作者
版权所有,转载注明出处:小白安全博客-菜鸟安全博客-小白个人博客 » 用JS 封装类似于JQ中animate的动画效果»https://www.xiaobaibk.com/xiao-bai-230.html

发表评论

表情

网友评论(0)