html无卡顿动画实现——requestAnimationFrame
2024-10-08 08:15:28
<!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>
最新文章
- js中 javascript:void(0) 用法详解
- rpc框架之 avro 学习 2 - 高效的序列化
- C++箴言:理解typename的两个含义
- HDU 4793 Collision(2013长沙区域赛现场赛C题)
- JavaScript-遍历数组
- SQL学习心得(转)
- 组件化CSS--管理你整站的CSS文件
- tcpdump dump 网络流量
- cf B. Valera and Contest
- SQL Server中表锁定的原理及解锁演示
- Ocelot + Consul + Registrator 基于Docker 实现服务发现、服务自动注册
- [树组BIT]训练两题重新理解ver.
- day 14 三元运算符,列表字典推导式,递归,匿名函数,内置函数(排序,映射,过滤,合并)
- 鸟哥的Linux私房菜:基础学习篇 —— 第五章笔记
- java php 等,路径 上级路径,上上级路径表示方法
- Mysql 查询列名
- Android中如何在Eclipse中关联源代码?(图文)
- 【数学期望】hdu5984 Pocky
- HBase学习笔记——概念及原理
- 使用SSH密钥方式登录ubuntu Linux,指令(ssh-keygen 和 ssh-copy-id)
热门文章
- linux入门系列12--磁盘管理之分区、格式化与挂载
- qt creator源码全方面分析(2-10-2)
- 【Java并发工具类】Java并发容器
- Mysql 导入导出备份
- 函数式编程/lambda表达式入门
- jQuery--dataTable 前端分页与后端分页 及遇到的问题
- 简化MVVM属性设置和修改 - .NET CORE(C#) WPF开发
- [MongoDB] 使用PHP根据_id字段查询数据
- Python3标准库:weakref对象的非永久引用
- GitHub当作私密的版本控制系统远端版本库私有化