html代码


        
     
      move

css代码

.roll-box {    position: relative;    width: 600px;    height: 400px;    background: #007acc;    overflow: hidden;    color: #fff;}.inner-box {    position: absolute;    top: 10px;    left: 0;    width: 50px;    height: 50px;    text-align: center;    line-height: 50px;    background-color: rgb(245, 152, 30);}button{    margin-top: 20px;    padding: 6px 10px;    border: 0;    color: #fff;    background-color: rgb(39, 133, 240);}

JavaScript代码

let moveCount = 0;let rafId = '';const ele = document.querySelector('.inner-box');window.requestAniFrame = (function () {    return window.requestAnimationFrame        // Older versions Chrome/Webkit        window.webkitRequestAnimationFrame ||        // Firefox < 23        window.mozRequestAnimationFrame ||        // opera        window.oRequestAnimationFrame ||        // ie        window.msRequestAnimationFrame ||        function (callback) {            return window.setTimeout(callback, 1000 / 60);        };})()window.cancelAnimation = (function () {    return window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.cancelRequestAnimationFrame || function (id) { clearTimeout(id) }})()function moveFn() {    ele.setAttribute('style', 'left:' + moveCount + 'px');    moveCount++    if (moveCount > 550) {        window.cancelAnimation(rafId)    } else {        rafId = window.requestAniFrame(moveFn)    }}function startMove() {    // 必须先清除，否者多次点击会生成多个动画帧，导致元素移动速度加快    window.cancelAnimation(rafId)    rafId = window.requestAniFrame(moveFn)}