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

代码如下:

<!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>

时间: 2014-01-12

JavaScript+html5 canvas实现图片破碎重组动画特效

也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

javascript转换静态图片,增加粒子动画效果

使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib <!DOCTYPE html> <html> <head> <title>particle image</title> <meta charset="utf-8" /> <style> #logo { margin-left:20px; margin-top:20px; width:160px; hei

图片动画横条广告带上下滚动的JS代码

复制代码 代码如下: <!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=

图片的左右移动,js动画效果实现代码

图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (smer == 1) step++; else step--; } if (x >= xk) { x = xk; smer = -1; } if (x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

js+css实现文字散开重组动画特效代码分享

文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l

js、jquery图片动画、动态切换示例代码

复制代码 代码如下: <style type="text/css"> #banner { padding: 5px; position: relative; width: 968px; height: 293px; /*border: 1px solid #666;*/ overflow: hidden; font-size: 16px; } #banner_list img { border: 0px; } #banner_bg { margin-bottom: 5px;

jquery图片倾斜层叠切换特效代码分享

本文实例讲述了jquery图片倾斜层叠切换特效代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery.roundabout.js制作的CSS3图片倾斜层叠切换效果代码,很有层次感还可以左右切换,一款很清新的代码实例. 运行效果图:                -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 我们需要以下代码把样式和特效导入: <link rel="style

JS实现图片翻书效果示例代码

picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS实现图片翻书效果</title> <META http-equiv=imag

JQuery 图片滚动轮播示例代码

完整的项目在附件中 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>图片切换</title> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript" > va

JS实现图片横向滚动效果示例代码

复制代码 代码如下: <!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=&qu

React+react-dropzone+node.js实现图片上传的示例代码

本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "

js/jquery去掉空格,回车,换行示例代码

Jquery:$("#accuracy").val($("#accuracy").val().replace(/\ +/g,""));//去掉空格 .replace(/\ +/g,"") //去掉空格方法$("#content").val($("#content").val().replace(/[ ]/g,""));    //去掉空格 .replace(/[ ]/

js 计算图片内点个数的示例代码

前言 图片是由连续的点信息组成,每个点信息包含四个长度即rgba信息,通过遍历配合处理函数实现对点个数的判断. 实现思路 本例子采用png格式图片,只需要判该点透明度(opacity)是否为0即可确定是否为小球上一点,如果不为0,判断上下左右方向的点是否透明度为0,不为0递归该结果,并且将该点的rgba信息置为0:结束后开始下一个主循环并计数,直至循环结束. 具体步骤 创建canvas对象,加载目标图片,使用canvas的drawImage方法将该图片对象写入canvas中:参数为图片对象,贴图

jquery Mobile入门—外部链接切换示例代码

1.内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2.外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD H

js和jquery实现监听键盘事件示例代码

项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e