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

前端技术 2023/09/01 JavaScript

复制代码 代码如下:

<!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>

本文地址：https://www.stayed.cn/item/1979

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案