html无卡顿动画实现——requestAnimationFrame 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div style="width:50px; height:50px; background-color:red;margin-left:2px;">
        文字
    </div>
</body>
</html>
<script>

    var px = 5;
    var myReq;
    function test() {
        var div = document.querySelector('div');

        div.style.marginLeft = (parseInt(div.style.marginLeft.replace('px', '')) + px) + 'px';

        //if (parseInt(div.style.marginLeft.replace('px', '')) > 500) {
        //    px = -px;
        //}

        //if (parseInt(div.style.marginLeft.replace('px', '')) <= 0) {
        //    px = -px;
        //}

        if (parseInt(div.style.marginLeft.replace('px', '')) > 500) {
            //window.cancelAnimationFrame(myReq);

            return;
        }

        myReq = window.requestAnimationFrame(test);
    }

    myReq = window.requestAnimationFrame(test);
</script>

　　

posted @ 2019-03-29 17:16  我要找到我的全世界  阅读(877)  评论(0)    收藏  举报