一、自定义JS动画
//定义一个函数，控制div向左或者向右移动
/*
参数：
obj 要执行动画的对象
attr：要执行动画的样式,修改动画样式，left ，right，height
target 执行动画的目标位置
speed 移动变化的速度
callback 回调函数，这个函数，在动画执行完毕后执行
*/
function move(obj, attr, target, speed, callback) {
//4.清除上一个定时器
clearInterval(obj.timer); //因timer定义在全局，需关闭对应obj的timer定时器，这样就不会影响其他的obj的定时器
//1:获取obj原来的attr值。getStyle（）下面封装的另一个函数，用来取对应obj的原来的值
var current = parseInt(getStyle(obj, attr)); //若取的是大小，则会得到xx px,用parseInt()取合法数字，便于下面的计算
//2:判断变化速度的正负值。若原值current比目标值大，则此时速度应该为负数，若小，则为正值
if (current > target) {
//此时速度应该为负数
speed = -speed;
}
//3:开启一个定时器，用来执行动画效果
obj.timer = setInterval(function () {
//（1）：获取obj原来的attr值
var oldValue = parseInt(getStyle(obj, attr));
//(2):在旧值上增加值，得到新值
var newValue = oldValue + speed;
//向右移动时，判断newValue是否大于800
//向左移动时，判断newValue是否小于0
//（3）：当速度为正值，新值大于目标值，或者当速度为负值，新值小于目标值时，让新值等于目标值，这样不管变化速度怎么样，都不会跑偏
if ((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
//（4）将新值设置给obj
obj.style[attr] = newValue + "px";
//（5）将元素移动到目标值时，停止移动
if (newValue == target) {
clearInterval(obj.timer);
//（6）动画执行完毕，调用回调函数
callback && callback(); //这一步是做判断，有就执行，没有就不执行
}
}, 30);
}
//获取当前对象的样式信息函数
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
} else {
return obj.currentStyle[name];
}
}
二、自定义动画演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
/* 指定了值，这样在ie中不会显示auto */
left: 0;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 150px;
}
</style>
<!-- 引入上面自定义的动画函数-->
<script src="./tools.js"></script>
<script>
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var btn = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var btn03 = document.getElementById("btn03");
var btn04 = document.getElementById("btn04");
// var timer;//定义变量，保存定时器的标识
/* 目前我们的定时器的标识由全局变量timer保存，
所有的执行正在执行的定时器都在这个变量中保存 */
//绑定单击响应函数
btn.onclick = function () {
move(box1, "left", 800, 20);
}
btn02.onclick = function () {
move(box1, "left", 0, 10);
}
btn03.onclick = function () {
move(box2, "left", 800, 10);
}
btn04.onclick = function () {
// move(box2, "width", 800, 10);
move(box2, "height", 800, 10, function () {
// alert("hello");
move(box2, "width", 800, 10, function () {
});
});
}
}
</script>
</head>
<body>
<button id="btn01">点击向右</button>
<button id="btn02">点击向左</button>
<button id="btn03">点击向左,box2向右移动</button>
<button id="btn04">测试</button>
<br>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
