快捷導(dǎo)航

發(fā)布一個(gè)基于javascript的動(dòng)畫類 Fx.js

更新時(shí)間：2010年11月05日 23:11:32 作者：

支持大部分CSS3屬性的動(dòng)畫(可能要指定詳細(xì)的屬性值)。

 
var example = new Fx(element,//元素 
{ 
form:{ 
//動(dòng)畫前的樣式 
//color:"#00f", 
}, 
to:{ 
//目標(biāo)樣式 
color:"#00f", 
"background-color":"#5f5", 
opacity:0.9, 
}, 
//線性方法 
transition:Transition.elasticInOut, 
//動(dòng)畫時(shí)間 
duration:5000, 
//動(dòng)畫幀值 
fps:50, 
onAnim:function(s){ 
//動(dòng)畫過程中 
}, 
onStart:function(){ 
//動(dòng)畫開始時(shí) 
}, 
onPause:function(){ 
//動(dòng)畫暫停時(shí) 
}, 
onResume:function(){ 
//動(dòng)畫恢復(fù)時(shí) 
}, 
onStop:function(){ 
//動(dòng)畫停止時(shí) 
} 
} 
); 
//開始動(dòng)畫 
example.start(); 
//停止動(dòng)畫 
example.stop(); 
//停止動(dòng)畫并恢復(fù)到原始樣式 
example.stop(1); 
//暫停動(dòng)畫 
example.pause(); 
//恢復(fù)動(dòng)畫 
example.resume(); 

完整演示代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Fx動(dòng)畫類 支持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">顯示數(shù)據(jù):</label> 
<input type="checkbox" id="showlog" onClick="showlog = this.checked;" /> 
<br /> 
<div id="log"></div> 
</body> 
</html> 