Copy codeThe Code is as follows:
Var example = new Fx (element, // element
{
Form :{
// The style before the animation
// Color: "# 00f ",
},
To :{
// Target Style
Color: "# 00f ",
"Background-color": "#5f5 ",
Opacity: 0.9,
},
// Linear method
Transition: Transition. elasticInOut,
// Animation time
Duration: 5000,
// Animation frame Value
Fps: 50,
OnAnim: function (s ){
// Animation Process
},
OnStart: function (){
// When the animation starts
},
OnPause: function (){
// When the animation is paused
},
OnResume: function (){
// When the animation is restored
},
OnStop: function (){
// When the animation is stopped
}
}
);
// Start the animation
Example. start ();
// Stop the animation
Example. stop ();
// Stop the animation and restore it to the original style
Example. stop (1 );
// Pause the animation
Example. pause ();
// Restore the animation
Example. resume ();
Complete DEMO code:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> Fx animation supports 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 (255, 0.6, 0,255,128)", // "rgb )",//
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 + = '
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"> display data: </label>
<Input type = "checkbox" id = "showlog" onClick = "showlog = this. checked;"/>
<Br/>
<Div id = "log"> </div>
</Body>
</Html>
Package download