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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
javascript实现下雨效果
Mar 27 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
layui动态加载多表头的实例
Sep 05 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
php生成随机数或者字符串的代码
2008/09/05 PHP
php 生成文字png图片的代码
2011/04/17 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
sublime text配置node.js调试(图文教程)
2017/11/23 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
python输出决策树图形的例子
2019/08/09 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
应聘医学检验人员自荐信
2013/09/27 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
世界上超棒的8种逻辑思维
2019/08/06 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Vue2.0搭建脚手架
2022/03/13 Vue.js
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers