javascript實現文字拼寫動畫效果

admin發表於2017-03-19
JavaScript動畫

使用flash可以製作具有文字拼寫效果的動畫，文字可以按照筆畫順序拼寫出來，當然利用javascript也是可以實現此功能的，下面就是一個具有類似功能的程式碼例項，它能夠以筆畫拼寫的方式輸出兩個數字，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.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>
<table>
  <tr>
    <td id="ld_anicon" style=" position:relative; display:inline-block; width:160px;"></td>
    <td style="display:inline-block; font-size:150px;">softwhy.com </td>
  </tr>
</table>
</body>
</html>

相關文章