js动画效果制件让图片组成动画代码分享

发布时间：2020-12-14 22:51:37 所属栏目：资源来源：网络整理

导读：复制代码代码如下: !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; ch

复制代码代码如下:

<!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");
ani.Add_cmd("1,10,20,30,40,50,10");
ani.Add_cmd("1,44,20");
ani.Add_cmd("1,39,30");
ani.Add_cmd("1,35,40");
ani.Add_cmd("1,31,50");
ani.Add_cmd("1,29,60");
ani.Add_cmd("1,27,70");
ani.Add_cmd("1,25,80");
ani.Add_cmd("1,23,90");
ani.Add_cmd("1,22,100");
ani.Add_cmd("1,21,110");
//5
ani.Add_cmd("1,70,84,45");
ani.Add_cmd("1,96,106,55");
ani.Add_cmd("1,114,120,65");
ani.Add_cmd("1,75");
ani.Add_cmd("1,85");
ani.Add_cmd("1,95");
ani.Add_cmd("1,105");
ani.Add_cmd("1,110");
ani.Add_cmd("1,80,90,100,110,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!