js動畫效果製件讓圖片組成動畫程式碼分享_javascript技巧

複製程式碼 程式碼如下:

 

 <script><br>//ld动画组建<br>//被加载的divID<br>function ldAni(contain_id,id_flag,start_id){<br> this.contain_id=contain_id;<br> this.id_flag=id_flag;<br> this.start_id=start_id;<br> this.a = new Array();<br> this.tempa=new Array();<br> this.Add_cmd=function(cmd){<br>  this.a.unshift(cmd);<br> };<br> this.bakdata=function(){<br>   this.tempa = this.a.concat();<br> };<br> this.steprun=function(){<br>   if (this.a.length < 1) {<BR> //从副本恢复数组到缓存，用于循环显示<BR> //this.a = this.tempa.concat();<BR> return;<BR> }<br><br> var x = this.a.pop();<BR> var cmds = x.toString().split(";"); //字符分<BR> for (var i = 0; i < cmds.length; i++) {<BR> if(cmds[i].toString().length>0){<br>    var d = cmds[i].toString().split(",");<br>    this.dit(d[0], d[1], d[2], d[3]);<br>    }<br>   }<br> };<br> this.dit=function(objid, cmd, cs1, cs2){<br><br>   var obj = null;<br>   try{<br>   obj = document.getElementById(this.id_flag + objid);<br>   }catch(e){}<br>   //move 移动的意思<br>   if (cmd == "m") {<br>   obj.style.left = cs1 + "px";<br>   obj.style.top = cs2 + "px";<br>   }<br>   //show 显示的意思<br>   else if (cmd == "s") {<br>   obj.style.display = "block";<br>   }<br>   //hidden 隐藏的意思<br>   else if (cmd == "h") {<br>   obj.style.display = "none";<br>   }<br>   else if(cmd=="a"){<br>    this.start_id++;<br>    var atag = document.createElement("a");<br>    atag.setAttribute("class", "ld_anipic");<br>    atag.setAttribute("id",this.id_flag + this.start_id);<br>    document.getElementById(this.contain_id).appendChild(atag);<br>    try{<br>     obj = document.getElementById(this.id_flag + this.start_id);<br>    }catch(e){}<br>    obj.style.display = "block";<br>    obj.style.left = cs1 + "px";<br>    obj.style.top = cs2 + "px";<br>   }<br> }<br><br>} <p> //动画速度可以在这里控制<br> var ani=new ldAni("ld_anicon","ldanim_pic",1);<br>//7<br>ani.Add_cmd("1,a,0,0");<br>ani.Add_cmd("1,a,10,0");<br>ani.Add_cmd("1,a,20,0");<br>ani.Add_cmd("1,a,30,0");<br>ani.Add_cmd("1,a,40,0");<br>ani.Add_cmd("1,a,50,0");<br>ani.Add_cmd("1,a,50,10");<br>ani.Add_cmd("1,a,44,20");<br>ani.Add_cmd("1,a,39,30");<br>ani.Add_cmd("1,a,35,40");<br>ani.Add_cmd("1,a,31,50");<br>ani.Add_cmd("1,a,29,60");<br>ani.Add_cmd("1,a,27,70");<br>ani.Add_cmd("1,a,25,80");<br>ani.Add_cmd("1,a,23,90");<br>ani.Add_cmd("1,a,22,100");<br>ani.Add_cmd("1,a,21,110");<br>//5<br>ani.Add_cmd("1,a,70,0");<br>ani.Add_cmd("1,a,70,10");<br>ani.Add_cmd("1,a,70,20");<br>ani.Add_cmd("1,a,70,30");<br>ani.Add_cmd("1,a,70,40");<br>ani.Add_cmd("1,a,84,45");<br>ani.Add_cmd("1,a,96,50");<br>ani.Add_cmd("1,a,106,55");<br>ani.Add_cmd("1,a,114,60");<br>ani.Add_cmd("1,a,120,65");<br>ani.Add_cmd("1,a,120,70");<br>ani.Add_cmd("1,a,120,75");<br>ani.Add_cmd("1,a,120,80");<br>ani.Add_cmd("1,a,120,85");<br>ani.Add_cmd("1,a,120,90");<br>ani.Add_cmd("1,a,114,95");<br>ani.Add_cmd("1,a,106,100");<br>ani.Add_cmd("1,a,96,105");<br>ani.Add_cmd("1,a,84,110");<br>ani.Add_cmd("1,a,70,110");<br>ani.Add_cmd("1,a,80,20");<br>ani.Add_cmd("1,a,90,20");<br>ani.Add_cmd("1,a,100,20");<br>ani.Add_cmd("1,a,110,20");<br>ani.Add_cmd("1,a,120,20");<br>ani.bakdata();<br>setInterval("ani.steprun()",50);<br> </script>


 

用js来进行一些图片的移动来组成动画效果

 
   

     
       
       
       
       >   表>