JavaScript 简单动画效果
JavaScript 简单动画效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它通过定时器方法实现了简单的动画效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#antzone{
width:200px;
height:200px;
background:red;
position:absolute;
left:0;
top:60px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("antzone");
var oBt=document.getElementsByTagName('input')[0];
var time=null;
oBt.onclick=function(){
clearInterval(time);
time=setInterval(function(){
var speed=7;
if(oDiv.offsetLeft<=600){
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
else{
clearInterval(time);
}
},40);
}
}
</script>
</head>
<body>
<input type="button" value="开始运动" />
<div id="antzone"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var oDiv=document.getElementById("antzone")，获取id属性值为antzone的元素对象。
（3）.var oBt=document.getElementsByTagName('input')[0]，获取input元素集合中的第一个元素，也就是按钮对象。
（4）.var time=null，声明一个变量并赋值为null,用来存储定时器函数的标识。
（5）.oBt.onclick=function(){}，按钮注册click事件处理函数。
（6）.clearInterval(time)，停止定时器函数的执行，这里是为了防止连续的点击导致两次定时器函数执行重合现象。
（7）.time=setInterval(function(){
var speed=7;
if(oDiv.offsetLeft<=600){
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
else{
clearInterval(time);
}
},40),每隔40毫秒执行一次相应的函数，也就是实现的运动效果。
二.相关阅读：
（1）.getElementsByTagName()方法参阅document.getElementsByTagName()一章节。
（2）.setInterval()方法参阅JavaScript setInterval()一章节。
（3）.offsetLeft属性参阅JavaScript offsetLeft一章节。
JavaScript 简单动画效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript 简单动画效果就介绍到这了。