Home > Developer > Web Develop
Javascript special effect code and JS special effect code
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK">
<Script src = "jquery-1.7.1.js" type = "text/javascript"> </script>
<Style type = "text/css">
Body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em {margin: 0; padding: 0; border: 0 ;}
Ul, ol, li {list-style: none ;}
Input, button {margin: 0; font-size: 12px; vertical-align: middle ;}
Body {font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-align: center; margin: 0 auto; background: url (.. /images/BG.jpg) repeat-y ;}
Table {border-collapse: collapse; border-spacing: 0 ;}
. Box {padding: 9px 0 0 11px; width: 759px; height: 611px; background: # ccc; margin: 20px auto ;}
. Inbox {width: 751px; height: 596px; position: relative ;}
# Random_box li {position: absolute; width: 144px; overflow: hidden; height: 144px; border: 3px solid # c7c5ca; background: # fff ;}
# Random_box li img {width: 144px; display: block; height: 144px ;}
. OK {display: block; width: 442px; height: 294px; background: # c00; color: # fff; font-size: 48px; position: absolute; top: 149px; left: 148px; cursor: pointer; text-align: center; line-height: 280px ;}
# Random_1 {left: 0; top: 0 ;}
# Random_2 {left: 148px; top: 0 ;}
# Random_3 {left: 296px; top: 0 ;}
# Random_4 {left: 444px; top: 0 ;}
# Random_5 {left: 592px; top: 0 ;}
# Random_6 {left: 592px; top: 148px ;}
# Random_7 {left: 592px; top: 298px ;}
# Random_8 {left: 592px; top: 446px ;}
# Random_9 {left: 444px; top: 446px ;}
# Random_10 {left: 296px; top: 446px ;}
# Random_11 {left: 148px; top: 446px ;}
# Random_12 {left: 0; top: 446px ;}
# Random_13 {left: 0; top: 298px ;}
# Random_14 {left: 0; top: 148px ;}
# Random_box li. random_current {border: 1px solid red ;}
</Style>
</Head>
<Body>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
<Div class = "box">
<Div class = "inbox">
<Ul id = "random_box">
<Li id = "random_1"> 1 </li>
<Li id = "random_2"> 2 </li>
<Li id = "random_3"> 3 </li>
<Li id = "random_4"> 4 </li>
<Li id = "random_5"> 5 </li>
<Li id = "random_6"> 6 </li>
<Li id = "random_7"> 7 </li>
<Li id = "random_8"> 8 </li>
<Li id = "random_9"> 9 </li>
<Li id = "random_10"> 10 </li>
<Li id = "random_11"> 11 </li>
<Li id = "random_12"> 12 </li>
<Li id = "random_13"> 13 </li>
<Li id = "random_14"> 14 </li>
</Ul>
<B class = "OK" onClick = "StartGame ()"> Lucky Draw </B>
</Div>
</Div>
<Script>
Var index = 1, // the current location of the bright area
PrevIndex = 14, // the previous position
Speed = 300, // initial Speed
Time, // define the object
Arr_length = 14; // GetSide (5, 5), // initialize the Array
EndIndex = 1, // determines where the speed slows down
Cycle = 0, // Number of rotated circles
EndCycle = 3, // calculate the number of circles
Flag = false, // indicates the stop rotation.
Random_num = 1, // Number of winners
Quick = 0; // Acceleration
Function StartGame (){
$ ("# Random_box li"). removeClass ("random_current"); // deselect
// Random_num = parseInt ($ ("# txtnum"). val ());//
Random_num = Math. floor (Math. random () * 13 + 2); // generate a random number between 2-12
Index = 1; // try again, starting from 1
Cycle = 0;
Flag = false;
// EndIndex = Math. floor (Math. random () * 12 );
If (random_num> 5 ){
EndIndex = random_num-5; // The first five cells start to slow down.
} Else {
EndIndex = random_num + 14-5; // The first 5 cells start to slow down.
}
// EndCycle = Math. floor (Math. random () * 3 );
Time = setInterval (Star, Speed );
}
Function Star (num ){
// Variable Speed
If (flag = false ){
// Start acceleration in five cells
If (quick = 5 ){
ClearInterval (Time );
Speed = 50;
Time = setInterval (Star, Speed );
}
// Run N laps to slow down
If (cycle = EndCycle + 1 & index-1 = EndIndex ){
ClearInterval (Time );
Speed = 300;
Flag = true; // trigger end
Time = setInterval (Star, Speed );
}
}
If (index> arr_length ){
Index = 1;
Cycle ++;
}
// Stop turning and select the number
If (flag = true & index = parseInt (random_num )){
Quick = 0;
ClearInterval (Time );
}
$ ("# Random _" + index). addClass ('random _ current'); // you can specify the selected style.
If (index> 1)
PrevIndex = index-1;
Else {
PrevIndex = arr_length;
}
$ ("# Random _" + prevIndex). removeClass ('rand_current '); // cancel the last selected Style
Index ++;
Quick ++;
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
