匀速运动的函数封装
小鸟一只大家多指点
css样式:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 100px;
}
#pox{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 0;
top: 251px;
}
#position{
width: 1px;
background: black;
height: 500px;
position: absolute;
left: 500px;
}
</style>
结构:
//JS代码
<script type="text/javascript">
//匀速运动 (位置发生改变:需要定位)
var flyToRight = document.getElementById("flyToRight");
var flyToLeft = document.getElementById("flyToLeft");
var box = document.getElementById("box");
var pox = document.getElementById("pox");
flyToRight.onclick = function(){
animate(box,501);
}
//向左运动
flyToLeft.onclick = function(){
animate(box,0);
}
pox.onclick = function(){
animate(pox,600,10);
}
var timer = null;
//匀速运动封装
function animate(obj,target,speedTime = 20){//给speedTime设置默认值为20
//speedTime = !!speedTime ? speedTime : 20;
//speedTime = speedTime || 20;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//如何实现当点击向右时就向右走,点击向左走时向左走
//向右走是+5
//向左走是-5
//定义一个speed,这个speed是+5和-5的关系
//向右target = 500 当前值 < 500 target- 当前值>0向右走
//向左target = 0 当前值 > 0 target- 当前值<0向左走
//bug:当目标值不是一个5的倍数的时候,永远到达 不了目标 值
//运动到最后的两个值
//终值505 目标值:503
//target - obj.offsetLeft最后一次执行的时候两个值的差值的绝对值一定是一个小于5的值
var speed = target - obj.offsetLeft > 0 ? 5 : -5;
//if(obj.offsetLeft == target){
if(Math.abs(target - obj.offsetLeft) < 5){
//最后会有5以内的像素差
//在最后 的一次可以 让其强制性到达 目标 值
obj.style.left = target + "px";
clearInterval(timer);
}else{//先判断后赋值
obj.style.left = obj.offsetLeft + speed + "px";
}
},speedTime);
}
</script>