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提高性能