您的位置：首页 > 其它

根据动画原理，初步封装运动函数 2

2016-10-19 17:03 633 查看

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn200">200</button>
<button id="btn400">400</button>
<div id="box"></div>
</body>
</html>
<script>
var box = document.getElementById("box");
var btn200 = document.getElementById("btn200");
var btn400 = document.getElementById("btn400");
btn200.onclick = function () {
animate(box,200);
}
btn400.onclick = function () {
animate(box,400);
}
function animate(obj,target){
clearInterval(obj.timer);
var speed = obj.offsetLeft < target ? 5 : -5; //用来判断是+还是-
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;  //因为目标位置与offsetLeft差值不会超过5
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) <= 5){  //如果差值少于5，说明到位置了。
clearInterval(obj.timer);
obj.style.left = target + "px";  //有最多5像素的差距，就直接跳转到target位置。
}
},30);
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航