提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

JS动画代码 分享 图片 效果 组成
2023-06-13 09:15:15 时间

复制代码代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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
functionldAni(contain_id,id_flag,start_id){
 this.contain_id=contain_id;
 this.id_flag=id_flag;
 this.start_id=start_id;
 this.a=newArray();
 this.tempa=newArray();
 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;
  }

   varx=this.a.pop();
  varcmds=x.toString().split(";");//字符分
  for(vari=0;i<cmds.length;i++){
   if(cmds[i].toString().length>0){
    vard=cmds[i].toString().split(",");
    this.dit(d[0],d[1],d[2],d[3]);
   }
  }
 };
 this.dit=function(objid,cmd,cs1,cs2){

  varobj=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显示的意思
  elseif(cmd=="s"){
  obj.style.display="block";
  }
  //hidden隐藏的意思
  elseif(cmd=="h"){
  obj.style.display="none";
  }
  elseif(cmd=="a"){
   this.start_id++;
   varatag=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";
  }
 }

}

 //动画速度可以在这里控制
 varani=newldAni("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>
    <tdid="ld_anicon"style="position:relative;display:inline-block;width:160px;">
       </td>
       <tdstyle="display:inline-block;font-size:250px;">
        SOFT.com
       </td>
   </tr>
  </table>
</body>
</html>

相关文章