【JS】抽奖大转盘，点击弹出抽奖效果

抽奖大转盘，点击弹出抽奖效果

 

  

    

        

        

            
               
                
用户1569****851抽中iphone7
                
用户1515****206抽中原始股
                
用户1550****789抽中iphone7
                
用户1370****627抽中原始股
                
用户1828****215抽中原始股
                
用户1589****572抽中原始股
                
用户1583****825抽中iphone7
                
用户1396****805抽中原始股
                
用户1332****261抽中iphone7
                
用户1884****863抽中原始股
                
用户1384****955抽中原始股
                
用户1897****137抽中原始股
                
用户1342****973抽中原始股
                
用户1558****071抽中原始股
                
用户1554****168抽中原始股
                
用户1562****018抽中原始股
                
用户1805****856抽中iphone7
                
用户1354****809抽中原始股
                
用户1383****364抽中原始股
            
        
        

            关闭
        


    
     
        

            
            
            
            
联系信息
            
关闭
            
 
                
            
            

                
            
            
           
            
		
            
            
     
            

                
                
                
            
        
    

    

css效果：

 

 

/* 大转盘效果CSS开始 */
.dzp{width:900px; display:none; position:fixed;margin:18%;top:-150px; z-index:1;}
.rotary{margin:auto 0; width:854px; height:504px; position:relative; background: url(../images/bg1.png);}
.rotary .rotaryArrow{position:absolute;left:145px;top:128px;width:251px;height:251px;cursor:pointer;background-image:url(../images/arrow.png);}

.rotary .list{position:absolute;right:-45px;top:144px;width:300px;height:320px;overflow:hidden;}
.rotary .list li{height:37px;font:14px/37px "Microsoft Yahei";color:#fff;text-indent:25px;background:url(../images/user.png) 0 no-repeat;}
.rotary .list li .font-red{color:#FC0203;}

.rotary .close{position:absolute;right:22px;top:50px;width:24px;height:24px;text-indent:-100px;}
.rotary .close a{position:absolute;right:0px;top:0px;width:24px;height:24px;text-indent:-100px;background-image:url(../images/close.png);overflow:hidden;}

.rotary .bd_wd{display:none;position:absolute;left:100px;top:100px;width:400px;height:200px;background-color:#fff;filter:alpha(opacity=90);}
.rotary .bd_wd .tcwindows{text-align: center;font-family: "微软雅黑";font-size: 16px;color: #333;}
.rotary .bd_wd .close {width: 25px;height: 25px;position: absolute;top: -5px; right: 5px; z-index: 100;}
.rotary .bd_wd .close a {width: 25px;height: 25px; text-indent: -100em; background: url("../images/close.png") no-repeat;}
.rotary .bd_wd .uname {width: 224px; height: 55px;border: 2px solid #cd0e1b;border-radius: 5px;padding-left: 10px;margin: auto 0;line-height: 55px; display: inline-block;}
.rotary .bd_wd .uphone {width: 224px;height: 55px;border: 2px solid #cd0e1b;border-radius: 5px;padding-left: 10px; line-height: 55px;display: inline-block;}
.rotary .bd_wd .ucodebtn { width: 104px;height: 55px; border: 2px solid #cd0e1b;border-radius: 5px;line-height: 55px;display: inline-block;text-indent: 0.5em; line-height: 55px;cursor:auto;color: #cd0e1b;}
.rotary .bd_wd .input_simit {width: 224px;height: 55px; border-radius: 5px; background:#d71f2e; margin-top: 10px;margin-left:10px;font-size: 16px;color: #fff;}
.rotary .bd_wd .input_simit:hover {background:rgba(0,0,0,0.75);;}

.rotary .tcwindows1{display:none; width:500px; height:500px; position:absolute;left:6px;top:2px; background: url(../images/win.png);}
.rotary .tcwindows1 .win a{width:328px; height:58px; position:absolute;left:88px;top:325px;}
.rotary .tcwindows2{display:none; width:500px; height:500px; position:absolute;left:6px;top:2px; background: url(../imagestwin.png);}
/* 效果CSS结束 */