小视频源码，Js动画缓慢效果实现
原创
小视频源码，js动画缓慢效果实现的相关代码
<!DOCTYPE HTML>
<html>
<head>
<title>js动画缓动效果实现setInterval()，就是慢慢的停下来</title>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"> </div>
<script>
//第一步 获得盒子的当前位置
var box = document.getElementById('box');
//每次移动的距离 = （目标值-现在的位置）/10
function move() {
box.style.marginLeft = box.offsetLeft + (300 - box.offsetLeft) / 10 + 'px';
if(box.offsetLeft == 300) {
clearTimeout(timer);
}
}
//用定时器让盒子动起来
var timer = setInterval(move, 100);
</script>
</body>
</html>以上就是小视频源码，js动画缓慢效果实现的相关代码， 更多内容欢迎关注之后的文章
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读