js滑动动画效果

最新推荐文章于 2024-02-14 07:15:00 发布

文初阳

最新推荐文章于 2024-02-14 07:15:00 发布

阅读量4.8k

点赞数

分类专栏： web前端 JavaScript 文章标签： js动画

本文链接：https://blog.csdn.net/writing_happy/article/details/79552932

版权

web前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

21 篇文章 0 订阅

订阅专栏

使用js制作简单的滑动动画效果（初级）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS animation</title>
  <style>
    *{ margin: 0; padding: 0; }
    div{ background-color: green; width: 100px; height: 100px; }
  </style>
</head>
<body>
<div id="div1"></div>
<script>
  div1.style.position = 'absolute'
  div1.style.left = 0
  var n = 0
  var id = setInterval(  ()=>  {
    n = n + 5
    div1.style.left = n + 'px'
    if(n>100){
      window.clearInterval(id)
    }
  },1000/24)

</script>
</body>
</html>

我们知道，由于视觉停留，那些静态的画面组合起来才会让我们有动画的错觉。这里我每秒移动这个小方块24次，每次移动5px，利用这种错觉让它看起来是在缓慢移动。
先对div1的style进行设置，使我们能够通过left控制它的偏移量。偏移量由n控制，n一直在递增。
由于动画需要停止，所以我们通过if判断在n>100的时候清除名称为id的interval，让它不再起作用。

文初阳

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js滑动动画效果

使用js制作简单的滑动动画效果（初级）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JS animation&lt;/title&gt; &lt;style&gt; *{ margin: 0; padding: 0;
复制链接

扫一扫