JS 动画（div小方块的移动）

最新推荐文章于 2024-03-25 20:00:15 发布

空巷挽清风

最新推荐文章于 2024-03-25 20:00:15 发布

阅读量1.5k

点赞数 2

分类专栏： JS 文章标签： HTML JS

本文链接：https://blog.csdn.net/kong_xiang/article/details/97402050

版权

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS 动画（div小方块的移动）：

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

var id = setInterval(函数, n);//不断刷新进行，n值越小频率越快。

clearInterval(id);//结束循环刷新。

样例：


<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  var id = setInterval(frame, 5);
  var id1;
  var id2;
  var id3;
  var id4;
  function frame() {
    if (pos == 350) {
      clearInterval(id);
      id1 = setInterval(T1,5);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
  function T1(){
    if(pos == 0){
        clearInterval(id1);
        pos=350;
        id2 = setInterval(T2,5);
    }
    else{
        pos--;
        elem.style.top =pos + "px";
    }
  }
  function T2(){
    if(pos==0){
        clearInterval(id2);
        id3 = setInterval(T3,5);
    }
    else{
        pos--;
        elem.style.left=pos + "px";
    }
  }
  function T3(){
    if(pos==350){
        clearInterval(id3);
        pos=0;
        id4 = setInterval(T4,5);
    }else{
        pos++;
        elem.style.top=pos+"px";
    }
  }
  function T4(){
    if(pos==350){
        clearInterval(id4);
    }else{
        pos++;
        elem.style.left= pos+"px";
    }
  }
}
</script>

</body>
</html>

空巷挽清风

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JS 动画（div小方块的移动）

JS 动画（div小方块的移动）：JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。var id = setInterval(函数, n);//不断刷新进行，n值越小频率越快。clearInterval(id);//结束循环刷新。样例：<!DOCTYPE ht...
复制链接

扫一扫