移动端学习之requestAnimationFrame兼容性相关处理

最新推荐文章于 2024-01-02 18:26:07 发布

安薇拉

最新推荐文章于 2024-01-02 18:26:07 发布

阅读量701

点赞数

分类专栏：移动端适配

本文链接：https://blog.csdn.net/m0_46977781/article/details/106785985

版权

移动端适配专栏收录该内容

4 篇文章 0 订阅

订阅专栏

不同厂商兼容性代码：

 var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 16);
    };

调用：

var boxEl = document.getElementById('box'),
        btnEl = document.getElementById('btn');
    var dest = window.innerWidth - 100,
        speed = 1,
        position = 0;
    btnEl.addEventListener('click', function () {
       requestAnimationFrame(step);
    }, false);

    function move(ele, position) {
        ele.style.transform = 'translate3d(' + position + 'px,0,0)';
    }
    function step() {
        if (position<dest){
            position+=speed;
            move(boxEl,position);
            requestAnimationFrame(step)
        }else {
            position=dest;
            move(boxEl,position)
        }
    }

html结构

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<button id="btn">start</button>
<div id="box" class="box"></div>
</body>

安薇拉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端学习之requestAnimationFrame兼容性相关处理

不同厂商兼容性代码： var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 16);
复制链接

扫一扫