<Input id = output3 style = "position: absolute; top: 300; left: 300;"/>
<Input id = output1/>
<Input id = output2/>
<Br/>
<Input id = output4/>
<Script>
Function Animation (target, targetProperty, closure, precision)
{
Closure = closure | function (x) {return x ;};
Precision = precision | 10;
This. handle;
Var beginTime = new Date ();
Var stopTime = new Date ();
This. Begin = function (){
BeginTime = new Date ();
This. handle = setInterval (
Function (){
Var now = new Date ();
Target [targetProperty] = closure (now. getTime ()-beginTime. getTime ());
},
Precision
);
}
This. Continue = function (){
Var now = new Date ();
BeginTime. setTime (now. getTime ()-stopTime. getTime () + beginTime. getTime ());
This. handle = setInterval (
Function (){
Var now = new Date ();
Target [targetProperty] = closure (now. getTime ()-beginTime. getTime ());
},
Precision
);
}
This. Stop = function (duration ){
ClearInterval (this. handle );
If (duration === undefined)
{
StopTime = new Date ();
Duration = stopTime. getTime ()-beginTime. getTime ();
}
Else stopTime. setTime (beginTime. getTime () + duration)
Target [targetProperty] = closure (duration );
}
}
Function StoryBoard (Duration, onfinish, flag)
{
Onfinish = onfinish | function (){};
Var r = new Array ();
R. appendAnimation = function (animation)
{
If (animation instanceof Animation)
This. push (animation );
}
R. removeAnimation = function (animation)
{
For (var I = 0; I <r. length; I ++)
{
If (r [I] = animation)
{
R. splice (I, 1 );
Break;
}
}
}
R. start = function (){
For (var I = 0; I <r. length; I ++)
{
R [I]. Begin ();
}
SetTimeout (
Function (){
For (var I = 0; I <r. length; I ++)
{
R [I]. Stop (Duration );
}
},
Duration
);
Onfinish ();
}
Return r;
}
//// // The following is how to use IT ////// //////////////////////////
Function $ (id)
{
Return document. getElementById (id );
}
Var a1 = new Animation ($ ("output1"), "value ");
Var a2 = new Animation ($ ("output2"), "width", function (x) {return Math. floor (x/10 );});
Var a3 = new Animation ($ ("output3 "). style, "filter", function (x) {return "alpha (opacity =" + Math. floor (x/5000*100) + ")";});
Var a4 = new Animation ($ ("output4 "). style, "width", function (x) {return Math. floor (x/50000/5000) + "px ";});
Var s = new StoryBoard (5000 );
S. appendAnimation (a1 );
S. appendAnimation (a2 );
S. appendAnimation (a3 );
S. appendAnimation (a4 );
S. start ();
</Script>
<Pre>
Output1 is to change the value
Output1 is to change the width
Output3 is light inbound
Output4 is a gentle width.
</Pre>