一、动画缓冲函数
/**
* 动画函数
* 任意一个元素移动到指定的目标位置
* @param {*} element 任意一个元素
* @param {*} target 目标位置（number类型）
*/
function animate(element, target) {
// 先清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
// 获取移动元素当前位置
var current = my$("dv").offsetLeft;
// 每次移动距离
var step = 9;
step = target > current ? step : -step;
// 移动后的距离
current +=step;
// 判断是否到达目标位置
if(Math.abs(target - current) > Math.abs(step)){
my$("dv").style.left = current + "px";
}else{
clearInterval(element.timeId);
my$("dv").style.left = target + "px";
}
}, 20);
}
二、html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv"></div>
<script src="./js/common.js"></script>
</body>
</html>
三、第三方js文件---common.js
// 根据id获取元素对象
function my$(id){
return document.getElementById(id);
}
/**
* 动画函数
* 任意一个元素移动到指定的目标位置
* @param {*} element 任意一个元素
* @param {*} target 目标位置（number类型）
*/
function animate(element, target) {
// 先清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
// 获取移动元素当前位置
var current = my$("dv").offsetLeft;
// 每次移动距离
var step = 9;
step = target > current ? step : -step;
// 移动后的距离
current +=step;
// 判断是否到达目标位置
if(Math.abs(target - current) > Math.abs(step)){
my$("dv").style.left = current + "px";
}else{
clearInterval(element.timeId);
my$("dv").style.left = target + "px";
}
}, 20);
}
四、效果图
初始位置截图
初始位置---->400px处
400px处----->800px处
800px处----->400px处
五、源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv"></div>
<!-- 引入第三方js文件 -->
<script src="./js/common.js"></script>
<script>
my$("btn").onclick = function(){
animate(my$("dv"),400);
}
my$("btn2").onclick = function(){
animate(my$("dv"),800);
}
</script>
</body>
</html>