<! Doctype html>
<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>
<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 ()" > Sweepstakes </b>
</div>
</div>
<script>
var index=1,//current bright area position
PREVINDEX=14,//Previous position
SPEED=300,//initial speed
Time,//define Object
Arr_length = 14; Getside (5,5),//Initialize array
Endindex=1,//decide which one to slow down
Cycle=0,//number of rotating laps
endcycle=3,//calculation of laps
Flag=false,//End Turn sign
Random_num=1,//winning number
quick=0; Accelerated
function Startgame () {
$ ("#random_box li"). Removeclass ("Random_current"); Uncheck
Random_num = parseint ($ ("#txtnum"). Val ());//
Random_num = Math.floor (Math.random () *13+2); Output random winning number 2--12 between
Index=1; One more time, starting from 1.
cycle=0;
Flag=false;
Endindex=math.floor (Math.random () *12);
if (random_num>5) {
EndIndex = random_num-5; The first 5 cells start to slow down
} else {
EndIndex = Random_num + 14-5; The first 5 cells start to slow down
}
Endcycle=math.floor (Math.random ());
Time = SetInterval (star,speed);
}
function Star (num) {
Racing Light Speed
if (Flag==false) {
Step five, start accelerating.
if (quick==5) {
Clearinterval (time);
speed=50;
Time=setinterval (Star,speed);
}
Run n-Ring 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++;
}
End Rotation and select number
if (flag==true && index==parseint (random_num)) {
quick=0;
Clearinterval (time);
}
$ ("#random_" +index). addclass (' random_current '); Set the currently selected style
if (index>1)
Previndex=index-1;
else{
Previndex=arr_length;
}
$ ("#random_" +previndex). Removeclass (' random_current '); Cancel last selected style
index++;
quick++;
}
</script>
</body>
The JS effect code of a rotating random number lottery
