JavaScript动画原理

最新推荐文章于 2024-05-17 13:52:13 发布

MDR_0820

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量77

点赞数

分类专栏： JavaScript 文章标签：动画 javascript css3

本文链接：https://blog.csdn.net/mdr_0820/article/details/120978248

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

动画原理

<style>
        div{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        // 获得盒子当前位置 div.offsetLeft

        // 让盒子在当前位置上加上一个 移动距离

        // div.style.left = div.offsetLeft + 2 + 'px'  
        
        // 此元素需要加定位才能使用div.style.left

         var timer = setInterval(function(){ //  利用定时器不断重复这个操作 
            if(div.offsetLeft >=888){
                // 停止动画  本质是停止定时器
                clearInterval(timer)
            }
            div.style.left = div.offsetLeft + 2 + 'px'
        },20)

    </script>
</body>

简单动画函数封装

<body>
    <div></div>
    <span></span>
    <script>
        var div = document.querySelector('div')
        var span = document.querySelector('span')
        // 简单动画封装 obj 目标对象 target 目标位置 
          function animate(obj,target){
                var timer = setInterval(function(){ //  利用定时器不断重复这个操作 
                if(obj.offsetLeft >=target){
                // 停止动画  本质是停止定时器
                    clearInterval(timer)
            }
            obj.style.left = obj.offsetLeft + 2 + 'px'
          },20)
          }
          animate(div,666)
          animate(span,888)    
    </script>
</body>

MDR_0820

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript动画原理

动画原理<style> div{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color:skyblue; } </style></head><body>
复制链接

扫一扫