javascript实现动画效果

 

位置position：

Position的属性有

static：按有关元素出现的先后顺序出现在浏览器的窗口中；

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。；

relative：除了有position属性外，还可以从文档的正常显示顺序中脱离开来，

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。；

 

 

一个位置函数：function  positionMessge(){

 

If(!document.getElementById) return false;

If(!document.gwtElementById("elem")) return false;

Var getID=document.getElementById("elem");

getID.style.position="absolute";

getID.style.tleft="100px";

getID.style.rigth="200px"

····

}

 

 

时间setTimeout：

Var   setRun=   setTimeout("function",interval)----function是将要执行的函数的名字，interval是以毫秒为单位设定需要经过多长时间后开始执行函数。

ClearTimeout（setRun）取消这个函数的运行状态

 

 

 

时间的递增MoveMessage（）：

为了让元素“动起来”，必须给函数设定时间的变化来控制页面元素的动态

moveMessage（）函数来体现：

1）获取元素当前的位置：

      getID.style.获得的将是一个字符串，而要的是位置，则需要用parseInt（）函数转化数字形式：    

          var xpos=parseInt（getID.style.left）;   

          var ypos=parseInt（getID.stle.right）; `````

   

2）判断如果该元素已经到达了他的目的地，则退出函数,如果还没到达目的地，则让他靠近 一点点

   If(xpos==100||ypos==200){return true;}

   If(xpos<100){xpos++;}

   If(xpos>100){xpos--;}

ypos也是类似的步骤；

3）把移动后的值赋值给当前的位置：

   getID.style.left=xpos+"px";

   getID.style.right=ypos+"px";

4)最后执行setRun即可。

代码如下：function moveMessage（）{

If(!document.getElementById) return false;

If(!document.gwtElementById("elem")) return false;

Var getID=document.getElementById("elem");

var xpos=parseInt（getID.style.left）;   

var ypos=parseInt（getID.style.right）; 

If(xpos==100||ypos==200){return true;}

   If(xpos<100){xpos++;}

   If(xpos>100){xpos--;}

   If(ypos<200){ypos++;}

   If(ypos>200){ypos--;}

   getID.style.left=xpos+"px";

   getID.style.right=ypos+"px";

 

 Var setRun=setTimeout("moveMessage()",200);

 

}

   

 

 

具体到抽象：MoveElement（elementID，final_x，final_y，interval）：

为了让程序具有一般性，应该把具体的参数变成抽象的参数，构造带参函数，

1）设置参数

     需要移动的元素的ID：elementID；

     目的位置：final_x；final_y；final_z···

     两次移动的停顿时间：interval；

2）构造函数：

 MoveElement（elemenetID，final_x，[··]，interval）{

 

If(!document.getElementById) return false;

If(!document.gwtElementById(elemenetID)) return false;

Var getID=document.getElementById(elemenetID);

var xpos=parseInt（getID.style.left）;   

var ypos=parseInt（getID.style.right）; 

If(xpos==final_x||ypos==200){return true;}

   If(xpos<final_x){xpos++;}

   If(xpos>final_x){xpos--;}

   If(ypos<final_y){ypos++;}

   If(ypos>final_y){ypos--;}

   getID.style.left=xpos+"px";

   getID.style.right=ypos+"px";

Var  newfunction=MoveElement（elementID，final_x，final_y，interval）

 Var setRun=setTimeout(newfunction,interval);

 

}