js实现动画效果

用js实现动画效果的主要思想是利用setInterval()函数.此函数可按照指定的周期（以毫秒计）来调用函数或表达式，并且该方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。

1.单个元素匀速运动

以匀速水平方向运动的元素为例，该方法传入三个参数，分别为要移动元素，要移动到的目标和移动的速度。其中，若速度大于0，表示元素从左向右移动；若速度小于0，表示元素从右向左移动

function startMove(ele,iTarget,speed){
	var timer=null;
	clearInterval(timer);//防止方法重复执行时，计时器的重复使用

	timer=setInterval(function(){
		if(ele.offsetLeft!=iTarget){
			ele.style.left=ele.offsetLeft+speed+"px";}
		},100);
	}

实现当鼠标在元素上移动时，使元素从左向右移动的效果

	var move=document.getElementById("move");
	move.οnmοusemοve=function(){startMove(move,500,10);}

2.单个元素透明度的匀速变化

设元素的初始透明度为opacity:0.3或filter:alpha(opacity:30)，透明度匀速变化的方法如下

function startOpacity(ele,iTarget,speed){
	var timer=null;
	var alpha=30;//元素透明度的值获取较难，这里直接给出
	clearInterval(timer);
	timer=setInterval(function(){
	if(alpha!=iTarget){
		alpha+=speed;
		ele.style.filter='alpha(opacity:'+alpha+')'; //设置IE的透明度
		ele.style.opacity= alpha/100; //设置fierfox等透明度，注意透明度值是小数
	}
	},50);
    }

实现当鼠标在元素上移动时，使元素透明度从0.3变为1，或从30变为100

        var move=document.getElementById("move");
	move.οnmοusemοve=function(){
		startOpacity(move,100,10);}

3.单个元素的缓冲运动

缓冲运动的本质是速度的不断变化，元素运动时越靠近目标其速度越小，实现方法如下

function bufferMove(ele,iTarget){
	var timer=null;
	clearInterval(timer);
	timer&#