发布一个基于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 相关文章推荐
Javascript 文件夹选择框的两种解决方案
Jul 01 Javascript
jQuery的三种$()
Dec 30 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
vue-axios使用详解
May 10 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
JS数组方法reduce的用法实例分析
Mar 03 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php实现倒计时效果
2015/12/19 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
javascript 判断当前浏览器版本并判断ie版本
2017/02/17 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
js实现随机数小游戏
2019/06/28 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python中max函数用于二维列表的实例
2018/04/03 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
心理健康活动总结
2014/04/30 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
班主任2015新年寄语
2014/12/08 职场文书
档案工作个人总结
2015/03/03 职场文书
教师培训简讯
2015/07/20 职场文书
公司周年庆典致辞
2015/07/30 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang