[Html]
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GB18030">
<Title> Spiral </title>
<Script type = "text/javascript" src = "js/jquery-1.5.js"> </script>
</Head>
<Body>
<Script type = "text/javascript">
Var Spiral;
Var yjq;
(Function (){
Yjq = function (name, turns, duration, frame, count, decrease_time ){
$ ('Style. enable_remove '). remove ();
Certificate ('regionid={test}'}.css ({'position': 'absolute ', 'width': 10, 'height': 10, 'top': 300, 'left': 300, 'background ': 'black '});
Spiral (name + '1', 600,300,300,300, turns, duration, frame );
Spiral (name + '2', 300,300, 0, turns, duration, frame );
Spiral (name + '3', 0,300,300,300, turns, duration, frame );
Spiral (name + '4', 300,600,300,300, turns, duration, frame );
Certificate ('{'{name}'1'}.css ({"-webkit-animation": name + "1" + duration + "ms linear" + count });
Certificate ('{'{name}'2'}.css ({"-webkit-animation": name + "2" + duration + "ms linear" + count });
Certificate ('{'{name}'3'}.css ({"-webkit-animation": name + "3" + duration + "ms linear" + count });
Certificate ('{'{name}'4'}.css ({"-webkit-animation": name + "4" + duration + "ms linear" + count });
Var arg = arguments;
$ ("#" + Name + "4"). one ('webkitanimationend', function (){
If (duration <= 0 ){
Return;
}
Arg. callee (name, turns, duration-= decrease_time, frame, count, decrease_time );
});
}
Spiral = function (name, w1, h1, w2, h2, N, T, frame ){
Var interval = T/frame; // interval of each frame
Var n; // Number of circles
Var I = 0;
Var k; // initial quadrant
Var R = Math. sqrt (Math. pow (w2-w1, 2) + Math. pow (h2-h1, 2), 2); // radius
Var style = "@-webkit-keyframes" + name + "{";
Var styleDom = $ ("<style class = 'Enable _ delete'> </style> ");
If (w1> w2 & h1 <= h2 ){
K = 1;
} Else if (w1 <= w2 & h1
K = 2;
} Else if (w1 <w2 & h1> = h2 ){
K = 3;
} Else {
K = 4;
}
For (var t = 0; t <T; t + = interval ){
Var t1 = t % (T/N );
N = Math. floor (t/(T/N ));
X = h2-R * (1-t1/T-n/N) * Math. cos (2 * Math. PI * t1 * N/T + Math. pow (-1, k) * Math. atan (Math. abs (w2-w1)/Math. abs (h2-h1) + (k> 2? 1:0) * (k % 2? -1:1) * Math. PI );
Y = w2-R * (1-t1/T-n/N) * Math. sin (2 * Math. PI * t1 * N/T + Math. pow (-1, k) * Math. atan (Math. abs (w2-w1)/Math. abs (h2-h1) + (k> 2? 1:0) * (k % 2? -1:1) * Math. PI );
Style + = (I ++) * 100/frame + '% {top:' + x + 'px; left: '+ y + 'px ;}';
}
Style + = '1970 {top: '+ w2 + 'px; left:' + h2 + 'px ;}}';
StyleDom.html (style );
$ ("Head"). append (styleDom );
};
})();
$ (Function (){
Var name = 'test ';
Var turns = 5; // Number of rotated circles
Var duration = 2000; // time consumed by sub-Animation
Var decrease_time = 100; // reduce the time consumed by each sub-Animation
Var frame = 1000; // number of sub-animation Frames
Var count = 2; // number of sub-animation executions
Yjq (name, turns, duration, frame, count, decrease_time );
});
</Script>
<Div id = "test1"> </div>
<Div id = "test2"> </div>
<Div id = "test3"> </div>
<Div id = "test4"> </div>
</Body>
</Html>
From the silent flashes of web programmers