发布一个基于javascript的动画类Fx.js_javascript技巧
来源:懂视网
责编:小采
时间:2020-11-27 20:55:42
发布一个基于javascript的动画类Fx.js_javascript技巧
发布一个基于javascript的动画类Fx.js_javascript技巧: 代码如下: var example = new Fx(element,//元素 { form:{ //动画前的样式 //color:#00f, }, to:{ //目标样式 color:#00f, background-color:#5f5, opacity:0.9, }, //线性方法 transition:Transit
导读发布一个基于javascript的动画类Fx.js_javascript技巧: 代码如下: var example = new Fx(element,//元素 { form:{ //动画前的样式 //color:#00f, }, to:{ //目标样式 color:#00f, background-color:#5f5, opacity:0.9, }, //线性方法 transition:Transit

代码如下:
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
发布一个基于javascript的动画类Fx.js_javascript技巧
发布一个基于javascript的动画类Fx.js_javascript技巧: 代码如下: var example = new Fx(element,//元素 { form:{ //动画前的样式 //color:#00f, }, to:{ //目标样式 color:#00f, background-color:#5f5, opacity:0.9, }, //线性方法 transition:Transit