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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
浅谈Vue.js
Mar 02 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
jsTree使用记录实例
2016/12/01 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
简单的项目建议书模板
2014/03/12 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
2016关于读书活动的心得体会
2016/01/14 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
Python Pygame实战之塔防游戏的实现
2022/03/17 Python