封装匀速动画
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
margin-top: 30px;
left: 0px;
}
</style>
</head>
<body>
<button id="btn1">点击移动到400px</button>
<button id="btn2">点击移动到800px</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
my$("btn2").onclick = function () {
//只需要产生一个定时器, 可以先清理定时器, 再设置
clearInterval(this.timeId);
this.timeId = setInterval(function () {
//1.获取div当前的位置--->看成盒子当前的left值
var current = my$("box").offsetLeft;//400
//2.div每一次移动多少像素 = 10 即步数
var step = 10;
//3.每次移动后的距离
current += step;
//4.判断移动后的位置是否达到目标位置
if(current <= 800){
my$("box").style.left = current + "px";
}else{
//清理定时器
clearInterval(this.timeId);
}
},30)
}
//封装匀速动画函数--->任意一个元素移动到指定的目标位置
//@params : 元素 目标位置
function animate(element,target ) {
//先清理定时器
clearInterval(element.timeId)
element.timeId = setInterval(function () {
//1.获取div当前的位置--->看成盒子当前的left值
var current = element.offsetLeft;//number类型
//2.div每一次移动多少像素 = 10 即步数
var step = 7;
//2.1判断往哪边移动
step = current <= target ? step : -step;
//3.每次移动后的距离
current += step;
////4.判断剩余的步数是否大于 step
if(Math.abs(target - current) > Math.abs(step)){
element.style.left = current + "px";
}else{
clearInterval(element.timeId);
element.style.left = target + "px";
}
},20)
}
my$("btn1").onclick = function () {
animate(my$("box"), 400);
}
my$("btn2").onclick = function () {
animate(my$("box"), 800);
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
#box {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
margin-top: 30px;
left: 0px;
}
</style>
</head>
<body>
<button id="btn1">点击移动到400px</button>
<button id="btn2">点击移动到800px</button>
<div id="box"></div>
<script src="common.js"></script>
<script>
my$("btn2").onclick = function () {
//只需要产生一个定时器, 可以先清理定时器, 再设置
clearInterval(this.timeId);
this.timeId = setInterval(function () {
//1.获取div当前的位置--->看成盒子当前的left值
var current = my$("box").offsetLeft;//400
//2.div每一次移动多少像素 = 10 即步数
var step = 10;
//3.每次移动后的距离
current += step;
//4.判断移动后的位置是否达到目标位置
if(current <= 800){
my$("box").style.left = current + "px";
}else{
//清理定时器
clearInterval(this.timeId);
}
},30)
}
//封装匀速动画函数--->任意一个元素移动到指定的目标位置
//@params : 元素 目标位置
function animate(element,target ) {
//先清理定时器
clearInterval(element.timeId)
element.timeId = setInterval(function () {
//1.获取div当前的位置--->看成盒子当前的left值
var current = element.offsetLeft;//number类型
//2.div每一次移动多少像素 = 10 即步数
var step = 7;
//2.1判断往哪边移动
step = current <= target ? step : -step;
//3.每次移动后的距离
current += step;
////4.判断剩余的步数是否大于 step
if(Math.abs(target - current) > Math.abs(step)){
element.style.left = current + "px";
}else{
clearInterval(element.timeId);
element.style.left = target + "px";
}
},20)
}
my$("btn1").onclick = function () {
animate(my$("box"), 400);
}
my$("btn2").onclick = function () {
animate(my$("box"), 800);
}
</script>
</body>
</html>
标签：function,动画,封装,timeId,element,current,step,my,匀速 来源： https://www.cnblogs.com/Ironman725/p/10928047.html