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来进行一些图片的移动来组成动画效果

 
   
     
       
   
  

SOFT.com