发布一个基于javascript的动画类 Fx.js
2010-11-05 00:00
211 查看
var example = new Fx(element,//元素 { form:{ //动画前的样式 //color:"#00f", }, to:{ //目标样式 color:"#00f", "background-color":"#5f5", opacity:0.9, }, //线性方法 transition:Transition.elasticInOut, //动画时间 duration:5000, //动画帧值 fps:50, onAnim:function(s){ //动画过程中 }, onStart:function(){ //动画开始时 }, onPause:function(){ //动画暂停时 }, onResume:function(){ //动画恢复时 }, onStop:function(){ //动画停止时 } } ); //开始动画 example.start(); //停止动画 example.stop(); //停止动画并恢复到原始样式 example.stop(1); //暂停动画 example.pause(); //恢复动画 example.resume();
完整演示代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Fx动画类 支持CSS3</title> <style type="text/css"> *{ margin:0; padding:0; font-size:12px;} #anim{ border-bottom:3pt solid #006;!important} button{ width:70px; height:30px; font-size:16px; text-align:center;} </style> <script src="../../scripts/Fx.js" type="text/javascript"></script> <script type="text/javascript"> /* Demo */ var fx,showlog = false; window.onload = function(){ var anim = document.getElementById("anim"); var log = document.getElementById("log"); fx = new Fx(anim, { to:{ position:"absolute", left:"180px", top:"180px", color:"hsla(270, 50%, 50%, 0.8)", "background-color":"#5f5", //"background-color":"rgba(0,0,255,0.6)",//"rgb(0,255,128)",// opacity:0.9, "font-size":"76px", "border-top-left-radius":"150px", "border-top-right-radius":"150px", "border-bottom-left-radius":"150px", "border-bottom-right-radius":"150px", "-moz-border-radius-topleft":"150px", "-moz-border-radius-topright":"150px", "-moz-border-radius-bottomright":"150px", "-moz-border-radius-bottomleft":"150px", "text-shadow":"#000 9px 6px 2px ", "-webkit-box-shadow":"#ff0 30px 20px 8px 0px", "-moz-box-shadow":"#ff0 30px 20px 8px 0px", width:"300px", height:"300px", "line-height":"300px" }, transition:Transition.elasticIn,//bounceIn duration:5000, onAnim:function(s){ var str=""; if(showlog){ str+= '<h1 style="color:red;font-size:16px;">runStyle:</h1>'; for(var k in s){ str+=k+":"+s[k]+"<br />"; } str+= "laveTime:"+this.laveTime+"<br />"; } log.innerHTML = str; }, onStop:function(){ //alert("Stop"); } } ); }; </script> </head> <body> <div id="anim" style=" position:absolute; left:70px; top:70px; width:150px; height:150px; color:hsla(10, 70%, 70%, 0.8); border:1px solid #666; background-color:#ccf; overflow:hidden; text-shadow:0px 0px 0px #000; font-size:26px; -webkit-box-shadow:0px 0px 0px #000; -moz-box-shadow:0px 0px 0px #000; -moz-border-radius:0px; text-align:center; line-height:150px;" > A</div> <button onClick="fx.start();">start()</button> <button onClick="fx.pause();">pause()</button> <button onClick="fx.resume();">resume()</button> <button onClick="fx.stop(0);">stop(0)</button> <button onClick="fx.stop(1);">stop(1)</button> <label for="showlog">显示数据:</label> <input type="checkbox" id="showlog" onClick="showlog = this.checked;" /> <br /> <div id="log"></div> </body> </html>
打包下载
相关文章推荐
- 发布一个基于javascript的动画类 Fx.js
- 发布一个开源极致的javascript模板引擎tpl.js
- 发布一个基于javascript的日期扩展
- pubsub.js简介,一个利用JavaScript进行发布/订阅的库
- D3.JS 基于javascript的图表展示库<二>----基本元素操作
- JavaScript模块化-require.js,r.js和打包发布
- 在WEB开发中的一个小细节问题==主要是自己调试的时候,诸如javascript(js)不起作用
- 发布一个基于 Reactor 模式的 C++ 网络库
- node.js 还没有发布一个正式版,核心团队已经另起炉灶
- Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
- 基于JavaScript实现一定时间后去执行一个函数
- 一个基于jQuery的锁定表格行列的js脚本
- JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
- JavaScript--一个用js加密的好玩的东东--俄罗斯方块(就是下面的)
- 一个简单的基于node.js的TCP服务器和基于C++的TCP客户端通信示例程序
- Shecha(煎茶)一个基于Ext.js框架的移动WEB应用框架(整理)
- 基于node.js的一个小爬虫
- 使用JavaScript实现一个“字节码解释器”,并用它重新实现JS科学计算器的后端(后续4)
- 发布一个史上最简单代码最少Javascript Timer,解决一切定时执行的问题