在我们编写前台设计的时候 我们往往要一些动画效果
我以前就是从网上下载 源代码 改改属性 就套在企业网站里面
现在我知道如何去开发一个动画效果
其实原理是很简单 利用一个定时器 setInterval(方法,30)
这个定时执行一段js代码 改变某个元素的属性 就形成了一个非常简单的动效果了....
入门代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#oDiv{ width:100px; height:100px; background:#FF0000; position:absolute; left:0px;}
</style>
<script language="javascript">
window.onload=function()
{
var oBut=document.getElementById("oBut");
var oDiv=document.getElementById("oDiv");
var iTimer=null;
oBut.onclick=function()
{
iTimer=setInterval(function(){
var myLeft=oDiv.offsetLeft; //获取div到定位父级的 left 值
//利用定时器 不断的去改变元素 div的left属性
//这样子就实现了一个简单的动画运动效果
oDiv.style.left=myLeft+10+"px";
},300);
}
}
</script>
</head>
<body>
<input type="button" name="oBut" id="oBut" value="开始运动" />
<br/><br/><br/>
<div id="oDiv"></div>
</body>
</html>
原文：http://771541213.blog.51cto.com/10810853/1751812