增加了几个新的按钮,点击按钮box2向右移动,测试按钮
通过修改定义函数move,添加参数
可以自定义进行div的移动,和变化
attr:要执行动画的样式,比如left top width height:
//move(box2, 10, 800, "width");//box2宽度向右边长
//move(box2, 10, 800, "top");//box2向下移动
//move(box2, 10, 800, "height");//box2向下边长
详细代码如下:
<!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;
}
#box2 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 200px;
}
</style>
<script>
window.onload = function () {
//获取box1,btn01
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
//定义一个变量
var time;
//点击按钮box1向右移动
btn01.onclick = function () {
move(box1, 10, 800, "left")
};
//点击按钮box1向左移动
btn02.onclick = function () {
move(box1, 10, 0, "left")//speed不用考虑正负值
};
//获取btn03
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
move(box2, 10, 800, "left");
};
//获取btn04,测试按钮
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
//move(box2, 10, 800, "width");//box2宽度向右边长
//move(box2, 10, 800, "top");//box2向下移动
//move(box2, 10, 800, "height");//box2向下边长
move(box2, 10, 800, "width", function () {
//通过回调函数,box2宽度先向右宽度边长,然后高度向下变高,在向上移动,在向左宽度缩小
move(box2, 10, 400, "height", function () {
move(box2, 10, 0, "top", function () {
move(box2, 10, 100, "width", function () { });
});
});
});
};
};
/*
定义一个函数,用来获取指定元素的当前的样式
参数: obj:要获取样式的元素
name:要获取的样式名
*/
function getStyle(obj, name) {
if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法,ie8以上有
return getComputedStyle(obj, null)[name];//正常浏览器
} else {
return obj.currentStyle[name];//IE浏览器
}
}
//创建一个可以简单执行动画的函数,当在调用的时候就不用像第一个(点击按钮box1向右移动)一样写那么多代码
/*
参数:
obj:要执行动画的对象
speed:要传进来的速度(正值向右移动,负值向左移动)
target:执行动画的目标位置
attr:要执行动画的样式,比如left top width height
callback:回调函数,这个函数会在动画执行完毕以后执行
*/
function move(obj, speed, target, attr, callback) {
//关闭上一个定时器
clearInterval(obj.time);
//获取元素当前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度正负值0-800speed为正,800-0speed为负
if (current > target) {
//此时速度为负值
speed = -speed;
}
//开启一个定时器
//向执行动画的对象中添加一个time属性,用来保存自己的定时器标识
obj.time = setInterval(function () {
//获取box1原来的值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值得基础上增加
var newValue = oldValue + speed;
//800向0移动,向左移动,需要判断newValue是否小于target speed负值newValue<target时,比如target=0,小于0让他dengyu0
//0到800移动,向右移动,需要判断newValue是否大于target
if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置为box1,[attr]是一个变量不能用.attr
obj.style[attr] = newValue + "px";
//当元素移动到0px时,使其停止执行移动
if (newValue == target) {
//达到目标,关闭定时器
clearInterval(obj.time);
//动画执行完毕,调用回调函数
callback && callback();//如果传了回调函数就执行,没有就不执行
}
}, 30);
}
</script>
</head>
<body>
<button id="btn01">点击按钮box1向右移</button> <button id="btn02">点击按钮box1向左移</button>
<button id="btn03">点击按钮box2向右移</button>
<button id="btn04">测试按钮</button><br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width:0;height:1000px;border-left:1px black solid;position:absolute;left:800px;top: 0;"></div>
</body>
</html>
结果:
点击第一、第三个按钮