<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>requestAnimationFrame</title>
<style>
#box {
width: 50px;
height: 50px;
border: 1px solid #666;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn">点我 点我</button>
<script>
var box = document.getElementById('box'),
btn = document.getElementById('btn'),
left = 0,
id;
// requestAnimationFrame 实现
window.requestAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
function(callback) {
id = window.setTimeout(callback, 1000 / 60); //
return id;
};
})();
window.cancelAnimationFrame = (function() {
return window.cancelAnimationFrame ||
window.mozCancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
function(id) {
window.clearTimeout(id);
}
})();
btn.onclick = function() {
requestAnimationFrame(step);
}
function step() {
left += 10;
box.style.marginLeft = left + 'px';
id = requestAnimationFrame(step);
if(left > 300) {
cancelAnimationFrame(id);
}
}
</script>
</body>
</html>