编写涉及:css, html, js

在线演示codepen

html代码

<div class="roll-box">
<div class="inner-box">move</div>
</div> <button onclick="startMove()"> start move</button>

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)
}

若有疑问或错误,请留言,谢谢!Github blog issues

requestAnimationFrame 兼容方案的更多相关文章

  1. js中getBoundingClientRect的作用及兼容方案

    js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...

  2. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  3. Emoji表情符号兼容方案(适用ios,android,wp等平台)

    http://blog.csdn.net/qdkfriend/article/details/7576524 Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(え ...

  4. Drawable 着色的后向兼容方案

    看到 Android Weekly 最新一期有一篇文章:Tinting drawables,使用 ColorFilter 手动打造了一个TintBitmapDrawable,之前也看到有些文章使用这种 ...

  5. [ios2]Emoji表情符号兼容方案 【转】

    Emoji表情符号兼容方案 一 什么是Emoji emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. emoji ...

  6. localStorage兼容方案

    localStorage是H5的存储方案,各大浏览器支持都相当不错,唯一悲催的就是IE,这个浏览器界的另类总是显得格格不入. IE “Internet选项”->“安全”中有一个“启动保护模式”的 ...

  7. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  8. Emoji表情符号兼容方案

    Emoji表情符号兼容方案 一 什么是Emoji    emoji就是表情符号:词义来自日语(えもじ,e-moji,moji在日语中的含义是字符) 表情符号现已普遍应用于手机短信和网络聊天软件. em ...

  9. 移动端 ios 长按复制兼容方案

    移动端页面,需要复制一段文字码. 在ios中,长按文字区域,默认选中的范围,超出了我长按的文字区域, 把上面的图片和下面的另一个div的文字也给我包含进来了,并不是我想要的! 举个例子: 如下图: 1 ...

随机推荐

  1. 执行某个文件夹下面的所有.py文件

    # 写一个函数,接受一个参数,如果是文件,就执行这个文件,如果是文件夹,就执行这个文件夹下所有的py文件 # 工作应用场景,假设一个文件夹下面有100个py文件,同步一些时间 # 例如抢票软件 10点 ...

  2. Modbus 指令

    本节内容: 一.S7-1200 作为Modbus RTU 主站 二.S7-1200 作为Modbus RTU 从站 三.S7-1200 作为Modbus RTU 主站 S7-1200 作为Modbus ...

  3. C++中 / 和 % 在分离各位时的妙用

    在学习c++的过程中,我们一般用 / 和 % 来分解数字的各个位 取整 (/) 比如1234 / 10 等于 123.4,这相当于把前三位分解出来了 取余(%) 比如 12345 的分解方法 个位:1 ...

  4. 哈工大计算机网络Week2-网络应用数据交换

    目录 网络应用数据交换 P2P应用:原理与文件分发 纯P2P架构 文件分发:客户机/服务器 vs. P2P CS 为什么是这样的?不应该传送和发出难道是并行的??? P2P P2P文件分发典型例子:B ...

  5. Bzoj1972: [Sdoi2010]猪国杀 题解(大模拟+耐心+细心)

    猪国杀 - 可读版本 https://mubu.com/doc/2707815814591da4 题目可真长,读题都要一个小时. 这道题很多人都说不可做,耗时间,代码量大,于是,本着不做死就不会死的精 ...

  6. [ZJOI2006]物流运输 题解

    [ZJOI2006]物流运输 时间限制: 10 Sec  内存限制: 162 MB 题目描述 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个 ...

  7. Android开发-实现第三方APP跳转

    自己创建一个按钮: <Button android:id="@+id/btn_button" android:layout_width="fill_parent&q ...

  8. Q&A-Ray-20180710

    Q: 如果集群多个客户端订阅会不会重复接收消息? A: 集群环境用,有另外一个参数. NodeManager类没有在框架里面: public interface INodeManager : IGra ...

  9. javascript之正则表达式(二)

    js正则贪婪模式与非贪婪模式 类似于贪吃蛇游戏,越吃越长.而贪婪模式就是尽可能多的匹配. 默认是贪婪模式      (尽可能多的匹配)                           例子: va ...

  10. sql nvarchar类型和varchar类型存储中文字符长度

    今天遇到了,随手记录一下.   sql server 存储数据里面 NVARCHAR 记录中文的时候是 一个中文对应一个字符串长度,记录英文也是一个字母一个长度 标点符号也是一样.          ...