DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js動畫效果制件讓圖片組成動畫代碼分享
js動畫效果制件讓圖片組成動畫代碼分享
編輯:JavaScript綜合知識     

 這篇文章主要介紹了使用js讓圖片組成動畫,這樣就可以用js做動畫了,大家參考使用吧

 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title>   <style>   .ld_anipic{ position:absolute; width:8px; height:8px; background-color:#ccc;}  </style>    <script> //ld動畫組建 //被加載的divID function ldAni(contain_id,id_flag,start_id){  this.contain_id=contain_id;  this.id_flag=id_flag;  this.start_id=start_id;  this.a = new Array();  this.tempa=new Array();  this.Add_cmd=function(cmd){   this.a.unshift(cmd);  };  this.bakdata=function(){    this.tempa = this.a.concat();  };  this.steprun=function(){    if (this.a.length < 1) {     //從副本恢復數組到緩存,用於循環顯示     //this.a = this.tempa.concat();     return;    }       var x = this.a.pop();    var cmds = x.toString().split(";"); //字符分    for (var i = 0; i < cmds.length; i++) {     if(cmds[i].toString().length>0){     var d = cmds[i].toString().split(",");     this.dit(d[0], d[1], d[2], d[3]);     }    }  };  this.dit=function(objid, cmd, cs1, cs2){      var obj = null;    try{    obj = document.getElementById(this.id_flag + objid);    }catch(e){}    //move 移動的意思    if (cmd == "m") {    obj.style.left = cs1 + "px";    obj.style.top = cs2 + "px";    }    //show 顯示的意思    else if (cmd == "s") {    obj.style.display = "block";    }    //hidden 隱藏的意思    else if (cmd == "h") {    obj.style.display = "none";    }    else if(cmd=="a"){     this.start_id++;     var atag = document.createElement("a");     atag.setAttribute("class", "ld_anipic");     atag.setAttribute("id",this.id_flag + this.start_id);     document.getElementById(this.contain_id).appendChild(atag);     try{      obj = document.getElementById(this.id_flag + this.start_id);     }catch(e){}     obj.style.display = "block";     obj.style.left = cs1 + "px";     obj.style.top = cs2 + "px";    }  }   }    //動畫速度可以在這裡控制  var ani=new ldAni("ld_anicon","ldanim_pic",1); //7 ani.Add_cmd("1,a,0,0"); ani.Add_cmd("1,a,10,0"); ani.Add_cmd("1,a,20,0"); ani.Add_cmd("1,a,30,0"); ani.Add_cmd("1,a,40,0"); ani.Add_cmd("1,a,50,0"); ani.Add_cmd("1,a,50,10"); ani.Add_cmd("1,a,44,20"); ani.Add_cmd("1,a,39,30"); ani.Add_cmd("1,a,35,40"); ani.Add_cmd("1,a,31,50"); ani.Add_cmd("1,a,29,60"); ani.Add_cmd("1,a,27,70"); ani.Add_cmd("1,a,25,80"); ani.Add_cmd("1,a,23,90"); ani.Add_cmd("1,a,22,100"); ani.Add_cmd("1,a,21,110"); //5 ani.Add_cmd("1,a,70,0"); ani.Add_cmd("1,a,70,10"); ani.Add_cmd("1,a,70,20"); ani.Add_cmd("1,a,70,30"); ani.Add_cmd("1,a,70,40"); ani.Add_cmd("1,a,84,45"); ani.Add_cmd("1,a,96,50"); ani.Add_cmd("1,a,106,55"); ani.Add_cmd("1,a,114,60"); ani.Add_cmd("1,a,120,65"); ani.Add_cmd("1,a,120,70"); ani.Add_cmd("1,a,120,75"); ani.Add_cmd("1,a,120,80"); ani.Add_cmd("1,a,120,85"); ani.Add_cmd("1,a,120,90"); ani.Add_cmd("1,a,114,95"); ani.Add_cmd("1,a,106,100"); ani.Add_cmd("1,a,96,105"); ani.Add_cmd("1,a,84,110"); ani.Add_cmd("1,a,70,110"); ani.Add_cmd("1,a,80,20"); ani.Add_cmd("1,a,90,20"); ani.Add_cmd("1,a,100,20"); ani.Add_cmd("1,a,110,20"); ani.Add_cmd("1,a,120,20"); ani.bakdata(); setInterval("ani.steprun()",50);  </script> </head> <body>   <div>用js來進行一些圖片的移動來組成動畫效果</div>   <table>    <tr>      <td id="ld_anicon" style=" position:relative; display:inline-block; width:160px;">         </td>         <td style="display:inline-block; font-size:250px;">          SOFT.com         </td>     </tr>    </table> </body> </html>  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved