发布一个基于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 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 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类中的各种拦截器用法分析
2014/11/03 PHP
PHP多文件上传实例
2015/07/09 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
点击页面其它地方隐藏该div的两种思路
2013/11/18 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
如何利用python查找电脑文件
2018/04/27 Python
python实现五子棋小游戏
2020/03/25 Python
详解python之heapq模块及排序操作
2019/04/04 Python
python实现动态创建类的方法分析
2019/06/25 Python
python向图片里添加文字
2019/11/26 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
《小蝌蚪找妈妈》教学反思
2014/02/21 职场文书
百年校庆宣传标语口号
2015/12/26 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android