在页面的动画效果中，经常有看到某个小块从一个地方移动到另一个地方的现象，现在，我们也来自己做一个这样的小动画，涉及到的基础包括定时器的使用和函数的使用
例如，我们要实现一个小方块从左面移动到右面，然后再从左面移动到右面，首先要做的事情是：
1.指定一个开关，点击的时候，开始左移或者开始右移
2.设置需要移动的元素块，为了醒目，我们把需要移动的元素设置背景为红色，设置定位属性为：绝对定位：absolute
3.开启一个定时器
4.设定需要移动的步长：speed
5.设置需要移动到的目标点：target
6.因为要移动元素，也就是要设置元素的left 属性，而获取元素属性的时候，不同的浏览器获取方式不一样，所以需要先写一个属性获取的函数，getStyle()
7.写一个左移的函数
8. 写一个右移的函数
需要注意的一点：定时器，使用的时候，记得先关后开，即使用前先清除
如下：
<!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.box {
position: relative;
}
div.tar {
top: 5em;
left: 2em;
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: #f33;
}
div.mubiao {
position: absolute;
left: 0;
width: 500px;
height: 200px;
border: 1px solid #888;
}
</style>
<script>
window.onload = function () {
var Ainput = document.getElementsByTagName("input");
var Odiv = document.getElementById("tar");
Odiv.timer = null;
var timer = null;
var speed = 10;
Ainput[0].onclick = function () {
clearTimeout(Odiv.timer);
Odiv.timer = setInterval(domoveleft, 100);
};
Ainput[1].onclick = function () {
clearTimeout(Odiv.timer);
Odiv.timer = setInterval(domoveright, 100);
};
function domoveleft() {
var Ocurleft = parseInt(getStyle(Odiv, 'left'));
var target = 500;
var Onextleft = Ocurleft + speed;
if (Onextleft >= target) {
Odiv.style.left = target + 'px';
clearTimeout(Odiv.timer);
} else {
Odiv.style.left = Onextleft + 'px';
}
};
function domoveright() {
var Ocurleft = parseInt(getStyle(Odiv, 'left'));
var target = 0;
var Onextleft = Ocurleft - speed;
if (Onextleft <= target) {
Odiv.style.left = target + 'px';
clearTimeout(Odiv.timer);
} else {
Odiv.style.left = Onextleft + 'px';
}
}
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 'huanying2015')[attr];
}
</script>
</head>
<body>
<div class="box">
<input type="button" value="向右">
<input type="button" value="向左">
<div class="tar" id="tar"></div>
<div class="mubiao"></div>
</div>
</body>
</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.box {
position: relative;
}
div.tar {
top: 5em;
left: 2em;
position: absolute;
left: 0;
width: 100px;
height: 100px;
background: #f33;
}
div.mubiao {
position: absolute;
left: 0;
width: 500px;
height: 200px;
border: 1px solid #888;
}
</style>
<script>
window.onload = function () {
var Ainput = document.getElementsByTagName("input");
var Odiv = document.getElementById("tar");
Ainput[0].onclick = function () {
domove(Odiv, 'left', 10, 500);
};
Ainput[1].onclick = function () {
domove(Odiv, 'left', 10, 0);
}
function domove(obj, attr, speed, target) {
clearInterval(obj.timer);
var Ocurposition = parseInt(getStyle(obj, attr));
speed = Ocurposition < target ? speed : -speed;
obj.timer = setInterval(function () {
var Ocurposition = parseInt(getStyle(obj, attr));
var nextposition = Ocurposition + speed;
if (nextposition >= target && speed > 0 || nextposition <= target && speed < 0) {
nextposition = target;
}
obj.style[attr] = nextposition + 'px';
if (nextposition == target) {
clearInterval(obj.timer);
}
}, 100);
}
}
function getStyle(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, 'huanying2015')[attr];
}
</script>
</head>
<body>
<div class="box">
<input type="button" value="向右">
<input type="button" value="向左">
<div class="tar" id="tar"></div>
<div class="mubiao"></div>
</div>
</body>
</html>
运行的结果：是一样的：
