发布一个基于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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
ExtJs纵坐标值重复问题的解决方法
Feb 27 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
Vue+Element UI实现概要小弹窗的全过程
May 30 Vue.js
微博@符号的用户名提示效果。(想@到谁?)
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
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python使用贪婪算法解决问题
2019/10/22 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
士力架广告词
2014/03/20 职场文书
推广活动策划方案
2014/08/23 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
优秀教师事迹材料
2014/12/15 职场文书
挂靠协议书
2015/01/27 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang