js 调用java fx程序_JavaScript_发布一个基于javascript的动画类 Fx.js，复制代码 代码如下: var example = - phpStudy...

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

复制代码 代码如下:

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();

完整演示代码:

复制代码 代码如下:

Fx动画类 支持CSS3

*{ 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;}

/* 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+= '

runStyle:

';

for(var k in s){

str+=k+":"+s[k]+"
";

}

str+= "laveTime:"+this.laveTime+"
";

}

log.innerHTML = str;

},

onStop:function(){

//alert("Stop");

}

}

);

};

A

start()

pause()

resume()

stop(0)

stop(1)

显示数据:

打包下载相关阅读:

PHP Stream_*系列函数

lyhucSelect基于Jquery的Select数据联动插件

颜色变换 像字符逐字输入的欢迎词

JSP简介(二)

CSS教程：div设置float后高度不自动增加

php下使用strpos需要注意 === 运算符

深入理解Display:Inline-Block

Linux设备驱动程序--与硬件通信

从php核心代码分析require和include的区别

jquery 弹出层注册页面等(asp.net后台)

CSS对IE6、IE7、IE8支持详细的易用的参考

如何用asp的jmail发邮件？

在PHP中读取和写入WORD文档的代码

SQL中使用WITH AS提高性能