在我们编写前台设计的时候  我们往往要一些动画效果


我以前就是从网上下载 源代码 改改属性 就套在企业网站里面


现在我知道如何去开发一个动画效果


其实原理是很简单 利用一个定时器 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>



wKioL1bpHFqzZearAABNlex0RtM602.png