码迷,mamicode.com
首页 > Web开发 > 详细

html无卡顿动画实现——requestAnimationFrame

时间:2019-03-29 17:28:51      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:UNC   margin   utf-8   highlight   ret   har   动画   http   height   

<!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>

  

html无卡顿动画实现——requestAnimationFrame

标签:UNC   margin   utf-8   highlight   ret   har   动画   http   height   

原文地址:https://www.cnblogs.com/zhoushangwu/p/10622593.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!