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


Posted in Javascript onJanuary 14, 2014
<!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>
Javascript 相关文章推荐
关于JavaScript的with 语句的使用方法
May 09 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jquery分页对象使用示例
Apr 01 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
Vue-component全局注册实例
Sep 06 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 #Javascript
js中opener与parent的区别详细解析
Jan 14 #Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 #Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 #Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 #Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 #Javascript
JS获取各种浏览器窗口大小的方法
Jan 14 #Javascript
You might like
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
浅谈php冒泡排序
2014/12/30 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
php写app用的框架整理
2019/09/29 PHP
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python CSV模块使用实例
2015/04/09 Python
python实现kNN算法
2017/12/20 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
python集合的新增元素方法整理
2020/12/07 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
员工试用期自我评价
2014/09/18 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
宪法宣传标语100条
2019/10/15 职场文书