<!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 type="text/css">
#btn
{
margin: 0 auto;
text-align: center;
}
*
{
margin: 0;
padding: 0;
}
#box1
{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left:200px;
}
#box2
{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left:0;
top: 200px;
}
#box3
{
width: 1px;
height: 1000px;
border-left: 1px black solid;
position: absolute;
left:800px
}
</style>
<script type="text/javascript">
window.onload=function()
{
//获取box1
var box1=document.getElementById("box1");
//获取box2
var box2=document.getElementById("box2");
//获取box3
var box3=document.getElementById("box3");
//获取btn01
var btn01=document.getElementById("btn01");
//获取btn02
var btn02=document.getElementById("btn02");
//获取btn03
var btn03=document.getElementById("btn03");
//获取btn04
var btn04=document.getElementById("btn04");
//获取btn05
var btn05=document.getElementById("btn05");
//获取btn06
var btn06=document.getElementById("btn06");
//获取btn07
var btn07=document.getElementById("btn07");
//获取btn08
var btn08=document.getElementById("btn08");
//定义一个timer变量
//var timer;
//尝试创建一个可以执行简单的元素移动的函数
//给函数传递参数
//obj 要执行的动画对象
//attr 要执行的动画样式 比如可以传递left top width
//targetPoint 执行动画的目标位置
//speed 动画移动速度(正数向右移动，负数向左移动)
function move(obj,attr,targetPoint,speed)
{
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var currentPoint=parseInt(getComputedStyle(obj,null)[attr]);
//判断速度的正负值
//如果从0向800移动，则speed为正
//如果从800向0移动，则speed为负
if(currentPoint > targetPoint)//即在目标位置的右边，需要向左移动
{
//此时速度为负值
speed=-speed;
}
//开启一个定时器，用来执行动画效果
//向执行动画的对象中添加一个timer属性，用来保存自己的定时器的标识，从而避免出现定时器标识的混用以及停止
//要注意四尽量不要使用全局变量
obj.timer=setInterval(function()
{
//获取目标box的原来的left值
var oldValue=parseInt(getComputedStyle(obj,null)[attr]);
//在旧值的基础上增加
var newValue=oldValue+speed;
//判断newValue是否大于800
//从800向0移动
//向左移动时，需要判断newValue是否小于targetPoint
//如果是向左移动，那么speed就是负值
//向右移动时，需要判断newValue是否大于targetPoint
if((speed<0 && newValue<targetPoint) || (speed>0 && newValue>targetPoint))
{
newValue=targetPoint;
}
//将新值设置给box1
obj.style[attr]=newValue+"px";
//元素移动到目标点时,使其停止移动动画
if(newValue == targetPoint)
{
clearInterval(pbj.timer);
}
},30);
}
//点击btn01后，红色向右移动
btn01.onclick=function()
{
move(box1,"left",800,20);
};
//点击btn02后，红色向左移动
btn02.onclick=function()
{
move(box1,"left",0,20);
};
//点击btn03后，黄色向右移动
btn03.onclick=function()
{
move(box2,"left",800,20);
};
//点击btn04后，黄色向左移动
btn04.onclick=function()
{
move(box2,"left",0,20);
};
//点击btn05后，黄色向下移动
btn05.onclick=function()
{
move(box2,"top",800,20);
};
//点击btn06后，黄色向上移动
btn06.onclick=function()
{
move(box2,"top",0,20);
};
//点击btn07后，红色向下移动
btn07.onclick=function()
{
move(box1,"top",800,20);
};
//点击btn08后，红色向上移动
btn08.onclick=function()
{
move(box1,"top",0,20);
};
//点击测试按钮，
//但因为调用了提前清定时器，所以在开启下一个定时器的时候，上一个定时器也会直接清除
//需要对timer变量的调用进行一些修改
};
//下面这个方法需要考虑是否兼容IE8，为了方便，我直接使用getComputedStyle(obj,null)[name]
/*
function getStyle(obj,name)
{
if(window.getComputedStyle)
{
return getComputedStyle(obj,null)[name];
}
else
{
return obj.currentStyle[name];
}
}
*/
</script>
</head>
<body>
<div id="btn">
<button id="btn01">红色右移</button>
<button id="btn02">红色左移</button>
<button id="btn07">红色下移</button>
<button id="btn08">红色上移</button>
<button id="btn03">黄色右移</button>
<button id="btn04">黄色左移</button>
<button id="btn05">黄色下移</button>
<button id="btn06">黄色上移</button>
</div>
<br><br>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
|