<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unt titled document</title>
<style>
.ld_anipic{ position:absolute; width:8px; height:8px; background-color:#ccc;}
</style>
<script>
// ld animation construction
//The loaded divID
function ldAni(contain_id,id_flag,start_id){
this.contain_id=contain_id;
this.id_flag=id_flag;
this.start_id=start_id;
= new Array();
=new Array();
this.Add_cmd=function(cmd){
(cmd);
};
=function(){
= ();
};
=function(){
if ( < 1) {
//Restore array from replica to cache, used for circular display
// = ();
return;
}
var x = ();
var cmds = ().split(";"); //Character segmentation
for (var i = 0; i < ; i++) {
if(cmds[i].toString().length>0){
var d = cmds[i].toString().split(",");
(d[0], d[1], d[2], d[3]);
}
}
};
=function(objid, cmd, cs1, cs2){
var obj = null;
try{
obj = (this.id_flag + objid);
}catch(e){}
//move means moving
if (cmd == "m") {
= cs1 + "px";
= cs2 + "px";
}
//show means
else if (cmd == "s") {
= "block";
}
//hidden Hidden
else if (cmd == "h") {
= "none";
}
else if(cmd=="a"){
this.start_id++;
var atag = ("a");
("class", "ld_anipic");
("id",this.id_flag + this.start_id);
(this.contain_id).appendChild(atag);
try{
obj = (this.id_flag + this.start_id);
}catch(e){}
= "block";
= cs1 + "px";
= cs2 + "px";
}
}
}
//The animation speed can be controlled here
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");
();
setInterval("()",50);
</script>
</head>
<body>
<div>Use js to move some pictures to form an animation effect</div>
<table>
<tr>
<td style=" position:relative; display:inline-block; width:160px;">
</td>
<td style="display:inline-block; font-size:250px;">
</td>
</tr>
</table>
</body>
</html>