用js实现一个无限循环的动画

最新推荐文章于 2024-01-01 21:38:36 发布

前端-pww

最新推荐文章于 2024-01-01 21:38:36 发布

阅读量1.2k

点赞数 3

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/csD_Dscnnnnnnn/article/details/123767541

版权

js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

建立移动函数，e.style.left = ` ${left++}px`
当flag=true时，left++,当left>=100,flag取反
当flag=false时，left--,当left<=0,flag取反

方法1：用setInterval(function（），1000/60）执行上面函数

方法2：用window.requestAnimationFrame()实现

(function dd(){

render()

window.requestAnimationFrame(dd)

})()

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #e{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0; 
        }
    </style>
</head>
<body>
<div id="e"></div>
<script>


    var e = document.getElementById("e");
    var flag = true;
    var left = 0;

    function render() {
       if(flag==true){
           if(left>=100){
               flag=false
           }
           e.style.left=`${left++}px`
       }else{
           if(left<=0){
               flag=true
           }
           e.style.left=`${left--}px`
       }
    }
    /*setInterval(function(){
        render()
    },1000/60)*/
    
    (function dd(){
        render()
        window.requestAnimationFrame(dd)
    })()

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