根据动画原理，初步封装 运动函数
2016-10-19 16:09
363 查看
注意obj.timer =setInterval()这个用法。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#run{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="run"></div>
</body>
</html>
<script>
function $(id){return document.getElementById(id)}
$("btn200").onclick = function () {
animate($("run"),200);
}
$("btn400").onclick = function () {
animate($("run"),400);
}
function animate(obj,target){
obj.timer = setInterval(function(){
if(obj.offsetLeft > target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 10 + "px";
},30);
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 根据动画原理，初步封装运动函数 2
- 缓动动画原理--封装基本函数
- [stm32] 利用uc-gui封装画图和画线函数移植51上的模拟动画
- 【翻译】CEDEC2013 BANDAI NAMCO 了解游戏格斗动画中的身体运动结构和原理
- js封装多物体运动函数
- tx4-封装运动框架基本函数-多属性-定时器-透明度
- 封装js运动函数
- uname函数初步封装
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
- 动画封装四：用json实现多条样式的缓动运动
- <深入浅出>根据函数调用过程谈栈回溯原理
- 原生JS 封装运动函数
- PHP单文件上传原理及上传函数的封装
- js中封装多物体运动及透明度变化函数
- 动画原理——脉动（膨胀缩小）&&无规则运动
- 动画封装二：实现水平缓动运动
- 点击按钮控制div前后运动——函数封装1
- UIView封装动画--iOS 利用系统提供方法来做弹性运动
- tx4-封装运动框架基本函数-多属性-带定时器
- 动画封装三：单条样式的缓动运动