發布一個基於javascript的動畫類 Fx.js

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

複製代碼代碼如下: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>

打包下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More