Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. scrollWait = function (options ){
Var ops = $. extend ({}, $. fn. scrollWait. defaults, options );
Var opts = $. meta? $. Extend ({}, ops, $ (this). data (): ops;
/**
* Display position
*/
Var win = $ (window );
Var winheight = win. height ();
Var winwidth = win. width ();
Var dsize = opts. size;
Var top = opts. top;
Var left = opts. left;
Var dtop =! Top & top! = "" & Typeof top! = "Undefined" & top! = 0
? (Winheight-dsize)/2
: Top;
Var dleft =! Left & left! = "" & Typeof left! = "Undefined"
& Left! = 0? (Winwidth-dsize)/2: left;
// Number of Origins
Var num = opts. num;
// Origin diameter
Var R = dsize/num * opts. areaWeight;
// Radius
Var r = 1/2 * R;
// Outer circle diameter
Var outerR = 1/2 * dsize;
// Inner circle diameter
Var innerR = outerR-R;
// Traverse and add the origin object
For (var I = 0; I <num; I ++ ){
$ ('Body'). append ($ ("<div class = \" innerCircle \ "id = \" innerCircle"
+ I + "\"> </div> "));
}
// Actual coordinates 0, 0
Var I = 0;
Var innerArray = new Array (num );
/**
* Calculate the center coordinate of the point on the inner circle
*/
For (var j = 0; j <innerArray. length; j ++ ){
Var x, y;
Var ang = I * 360/num;
If (0 <= ang & ang <= 90 ){
X = outerR * Math. sin (ang/180 * Math. PI) + outerR;
Y = outerR-outerR * Math. cos (ang/180 * Math. PI );
}
If (90 <ang & ang <= 180 ){
X = outerR * Math. cos (ang-90)/180 * Math. PI) + outerR;
Y = outerR * Math. sin (ang-90)/180 * Math. PI) + outerR;
}
If (180 <ang & ang <= 270 ){
X = outerR-outerR * Math. sin (ang-180)/180 * Math. PI );
Y = outerR * Math. cos (ang-180)/180 * Math. PI) + outerR;
}
If (270 <ang & ang <= 360 ){
X = outerR-outerR * Math. cos (ang-270)/180 * Math. PI );
Y = outerR-outerR * Math. sin (ang-270)/180 * Math. PI );
}
InnerArray [j] = new Array (dtop + y-r, dleft + x-r );
I ++;
}
/**
* Circle
*/
$ (". InnerCircle"). each (function (){
Certificate (this).css ({
'Width': R + "px ",
'Height': R + "px ",
'Border-top-left-radius ': r + "px ",
'Border-top-right-radius ': r + "px ",
'Border-bottom-left-radius ': r + "px ",
'Border-bottom-right-radius ': r + "px"
});
});
For (var I = 0; I <num; I ++ ){
$ ("# InnerCircle" + i2.16.css ({
'Top': innerArray [I] [0] + "px ",
'Left': innerArray [I] [1] + "px"
});
}
// Find the position of the currently paused circle
Var val = $ ("# current"). val ();
If (val = undefined | val = ""){
$ ("Body"). append ($ ("<input type = \" hidden \ "id = \" current \ "> "));
K = 0;
} Else {
K = val;
}
Var o = new Object ();
Var timer;
// Start Rotation
O. start = function (){
Var first;
Var g = $ ("# grade"). val ();
If (g = undefined | g = ""){
$ ("Body"). append ($ ("<input type = \" hidden \ "id = \" grade \ "> "));
First = 1;
} Else {
First = g;
}
Timer = setInterval (function (){
If (first % 2 = 1 ){
$ ("# InnerCircle" + k). removeClass ("innerCircle ")
. AddClass ("innerCircle-change ");
}
If (first % 2 = 0 ){
$ ("# InnerCircle" + k). removeClass ("innerCircle-change ")
. AddClass ("innerCircle ");
}
If (k = (num-1 )){
K = 0;
Console. log (first );
First ++;
$ ("# Grade"). val (first );
} Else {
K ++;
}
// Overwrite Value
$ ("# Current"). val (k );
}, Opts. speed );
Return this;
}
// Pause
O. stop = function (){
ClearInterval (timer );
Return this;
}
// End
O. end = function (){
ClearInterval (timer );
// Remove all elements
$ (". InnerCircle,. innerCircle-change, # current, # grade"). remove ();
}
Return o;
}
$. Fn. scrollWait. defaults = {
Size: 80,
Top: null,
Left: null,
// Quantity
Num: 8,
Velocity: 200,
// Percentage of dots in the whole area
AreaWeight: 5/4
};
}) (JQuery );
Call method:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> MyHtml.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" type = "text/css"
Href = "scroll-wait-jquery-plugin.css">
</Head>
<Script type = "text/javascript" src = "jquery-1.7.js"> </script>
<Script type = "text/javascript" src = "scroll-wait-jquery-plugin.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Var w = $ ("body"). scrollWait ();
W. start ();
SetTimeout (function () {w. stop () ;}, 1000 );
SetTimeout (function () {w. start () ;}, 2000 );
SetTimeout (function () {w. stop () ;}, 3000 );
SetTimeout (function () {w. start () ;}, 4000 );
SetTimeout (function () {w. stop () ;}, 5000 );
SetTimeout (function () {w. start () ;}, 6000 );
SetTimeout (function () {w. end () ;}, 7000 );
});
</Script>
<Body>
</Body>
</Html>
Css:
Copy codeThe Code is as follows:
. InnerCircle {
Position: absolute;
Background: # FFFF00;
Opacity: 0.8;
}
. InnerCircle-change {
Background: #333;
Position: absolute;
}