js动画效果制件让图片组成动画代码分享_javascript技巧-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:04 PM

复制代码代码如下:

无标题文档

 <script><BR>//ld动画组建<BR>//被加载的divID<BR>function ldAni(contain_id,id_flag,start_id){<BR> this.contain_id=contain_id;<BR> this.id_flag=id_flag;<BR> this.start_id=start_id;<BR> this.a = new Array();<BR> this.tempa=new Array();<BR> this.Add_cmd=function(cmd){<BR>  this.a.unshift(cmd);<BR> };<BR> this.bakdata=function(){<BR>   this.tempa = this.a.concat();<BR> };<BR> this.steprun=function(){<BR>   if (this.a.length < 1) {<BR>    //从副本恢复数组到缓存，用于循环显示<BR>    //this.a = this.tempa.concat();<BR>    return;<BR>   }<br><br>    var x = this.a.pop();<BR>   var cmds = x.toString().split(";"); //字符分<BR>   for (var i = 0; i < cmds.length; i++) {<BR>    if(cmds[i].toString().length>0){<BR>    var d = cmds[i].toString().split(",");<BR>    this.dit(d[0], d[1], d[2], d[3]);<BR>    }<BR>   }<BR> };<BR> this.dit=function(objid, cmd, cs1, cs2){<br><br>   var obj = null;<BR>   try{<BR>   obj = document.getElementById(this.id_flag + objid);<BR>   }catch(e){}<BR>   //move 移动的意思<BR>   if (cmd == "m") {<BR>   obj.style.left = cs1 + "px";<BR>   obj.style.top = cs2 + "px";<BR>   }<BR>   //show 显示的意思<BR>   else if (cmd == "s") {<BR>   obj.style.display = "block";<BR>   }<BR>   //hidden 隐藏的意思<BR>   else if (cmd == "h") {<BR>   obj.style.display = "none";<BR>   }<BR>   else if(cmd=="a"){<BR>    this.start_id++;<BR>    var atag = document.createElement("a");<BR>    atag.setAttribute("class", "ld_anipic");<BR>    atag.setAttribute("id",this.id_flag + this.start_id);<BR>    document.getElementById(this.contain_id).appendChild(atag);<BR>    try{<BR>     obj = document.getElementById(this.id_flag + this.start_id);<BR>    }catch(e){}<BR>    obj.style.display = "block";<BR>    obj.style.left = cs1 + "px";<BR>    obj.style.top = cs2 + "px";<BR>   }<BR> }<br><br>}
<P> //动画速度可以在这里控制<BR> var ani=new ldAni("ld_anicon","ldanim_pic",1);<BR>//7<BR>ani.Add_cmd("1,a,0,0");<BR>ani.Add_cmd("1,a,10,0");<BR>ani.Add_cmd("1,a,20,0");<BR>ani.Add_cmd("1,a,30,0");<BR>ani.Add_cmd("1,a,40,0");<BR>ani.Add_cmd("1,a,50,0");<BR>ani.Add_cmd("1,a,50,10");<BR>ani.Add_cmd("1,a,44,20");<BR>ani.Add_cmd("1,a,39,30");<BR>ani.Add_cmd("1,a,35,40");<BR>ani.Add_cmd("1,a,31,50");<BR>ani.Add_cmd("1,a,29,60");<BR>ani.Add_cmd("1,a,27,70");<BR>ani.Add_cmd("1,a,25,80");<BR>ani.Add_cmd("1,a,23,90");<BR>ani.Add_cmd("1,a,22,100");<BR>ani.Add_cmd("1,a,21,110");<BR>//5<BR>ani.Add_cmd("1,a,70,0");<BR>ani.Add_cmd("1,a,70,10");<BR>ani.Add_cmd("1,a,70,20");<BR>ani.Add_cmd("1,a,70,30");<BR>ani.Add_cmd("1,a,70,40");<BR>ani.Add_cmd("1,a,84,45");<BR>ani.Add_cmd("1,a,96,50");<BR>ani.Add_cmd("1,a,106,55");<BR>ani.Add_cmd("1,a,114,60");<BR>ani.Add_cmd("1,a,120,65");<BR>ani.Add_cmd("1,a,120,70");<BR>ani.Add_cmd("1,a,120,75");<BR>ani.Add_cmd("1,a,120,80");<BR>ani.Add_cmd("1,a,120,85");<BR>ani.Add_cmd("1,a,120,90");<BR>ani.Add_cmd("1,a,114,95");<BR>ani.Add_cmd("1,a,106,100");<BR>ani.Add_cmd("1,a,96,105");<BR>ani.Add_cmd("1,a,84,110");<BR>ani.Add_cmd("1,a,70,110");<BR>ani.Add_cmd("1,a,80,20");<BR>ani.Add_cmd("1,a,90,20");<BR>ani.Add_cmd("1,a,100,20");<BR>ani.Add_cmd("1,a,110,20");<BR>ani.Add_cmd("1,a,120,20");<BR>ani.bakdata();<BR>setInterval("ani.steprun()",50);<BR> </script>

用js来进行一些图片的移动来组成动画效果

         SOFT.com

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。

超越浏览器：现实世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在现实世界中的应用包括服务器端编程、移动应用开发和物联网控制：1.通过Node.js实现服务器端编程，适用于高并发请求处理。2.通过ReactNative进行移动应用开发，支持跨平台部署。3.通过Johnny-Five库用于物联网设备控制，适用于硬件交互。

使用Next.js（后端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。首先，什么是多租户SaaS应用程序？多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

如何使用Next.js（前端集成）构建多租户SaaS应用程序Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

JavaScript：探索网络语言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。