版权声明:版权所有,如需引用,请注明出处! https://blog.csdn.net/DHRMM999/article/details/82467994
js动画封装
代码实现如下
css样式
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
margin: 0;
padding: 5px;
position: relative;
}
#box1{
width: 100px;
height: 150px;
border: 1px solid #000;
background: red;
position: absolute;
}
#box2{
width: 100px;
height: 150px;
border: 1px solid #000;
background: yellow;
position: absolute;
top: 200px;
}
</style>
html
<button id="btn1">运动200</button>
<button id="btn2">运动400</button>
<div id="box">
<div id="box1">
</div>
<div id="box2">
</div>
</div>
js实现
<script type="text/javascript">
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
btn1.onclick = function(){
animate(box1,200);
animate(box2,200);
}
btn2.onclick = function(){
animate(box1,400);
animate(box2,400);
}
function animate(ele,target){
clearInterval(ele.timer);
//保证可以实现正方向和反方向
var speed = target>ele.offsetLeft?10:-10;
ele.timer = setInterval(function(){
//获取当前位置
var val = target-ele.offsetLeft;
//div实现移动
ele.style.left = ele.offsetLeft+speed+"px";
if(Math.abs(val)<Math.abs(speed)){
ele.style.left = target+"px";
clearInterval(ele.timer);
}
},40);
}
</script>