发布一个基于javascript的动画类 Fx.js


Posted in Javascript onNovember 05, 2010
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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
ajax与302响应代码测试
Oct 23 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
angular实现form验证实例代码
Jan 17 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
js实现计算器功能
Aug 10 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 #Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 #Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 #Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 #Javascript
基于jQuery的仿flash的广告轮播
Nov 05 #Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 #Javascript
基于jquery的loading效果实现代码
Nov 05 #Javascript
You might like
php中http_build_query 的一个问题
2012/03/25 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python分割和拼接字符串
2013/11/01 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
简洁的十分钟Python入门教程
2015/04/03 Python
Python使用剪切板的方法
2017/06/06 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
少先队学雷锋活动总结范文
2014/03/09 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
楚门的世界观后感
2015/06/03 职场文书
城南旧事电影观后感
2015/06/16 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书