您的位置：首页 > Web前端 > JavaScript

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

2014-01-14 11:16 513 查看
<!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动画组建//被加载的divIDfunction 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);//7ani.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");//5ani.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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js动画效果
相关文章推荐
新的分享
章节导航