首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >小视频源码,Js动画缓慢效果实现

小视频源码,Js动画缓慢效果实现

原创
作者头像
yunbaokeji柯基
修改于 2020-11-18 16:27:40
修改于 2020-11-18 16:27:40
4K0
举报
文章被收录于专栏:直播知识直播知识

小视频源码,js动画缓慢效果实现的相关代码

代码语言:javascript
复制
<!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 删除。

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档