转盘抽奖特效

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
       <title></title>
<style>

*{
   margin: 0;
   padding: 0;
}
ul{
   /*background: url(../img/bg-lottery.png) no-repeat;
   background-size: 100% 100%;*/
   font-size: 0.15rem;
   border-radius: 100%;
   display: flex;
   display: -webkit-flex;
   width: 2.8rem;
   height: 2.8rem;
   margin-left: 0.35rem;
   position: relative;
   padding: 0.2rem;
   background: url(../img/ly-plate-c.gif) no-repeat;
   background-size: 100% 100%;
}
img{
   width: 2.8rem;
   height: 2.8rem;
}
li{
   list-style: none;
   display: none;
}
span{
   display: block;
   background: url(../img/playbtn.png) no-repeat;
   background-size: 100% 100%;
   width: 0.6rem;
   height: 0.6rem;
   position: absolute;
   margin-top: 1.2rem;
   margin-left: 1.1rem;
}

</style>
   </head>
   <body>
       <ul class="zhuanpanfu">
           <li class="zhuanpanli">理财金2000元</li>
           <li class="zhuanpanli">谢谢参与</li>
           <li class="zhuanpanli">理财金5200元</li>
           <li class="zhuanpanli">京东の卡</li>
           <li class="zhuanpanli">谢谢参与</li>
           <li class="zhuanpanli">理财金1000元</li>
           <img src="img/bg-lottery.png"/>
       <span></span>
       </ul>
   </body>
   <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
<script>

$(function(){
   var viewWidth = $(window).width();
   var viewWidth_10=viewWidth/100;
   document.documentElement.style.fontSize=document.documentElement.clientWidth/viewWidth_10+'px';
   var j=0;
   $('span').click(function(){
       var i=1;
       j++;
       var timeflag= setInterval(function(){
           if(i<=800){
               i+=5;
               $('img').css('transform',"rotate("+i+"deg)")
           }
           else if(i>800&i<=1300){
               i+=4;
               $('img').css('transform',"rotate("+i+"deg)")
           }
           else if(i>1300&i<=1700){
               i+=3;
               $('img').css('transform',"rotate("+i+"deg)")
           }
           else if(i>1700&i<=1900){
               i+=2;
               $('img').css('transform',"rotate("+i+"deg)")
           }
           else if(i>1900&i<=2000){
               i+=1;
               $('img').css('transform',"rotate("+i+"deg)");
           }
           else if(i>2000&i<=2100){
               i+=0.6;
               $('img').css('transform',"rotate("+i+"deg)");
           }
           else if(i>2100&i<=2160){
               i+=0.4;
               $('img').css('transform',"rotate("+i+"deg)");
           }
           else{
               clearInterval(timeflag)
           }
       },1)

   })

})

</script>
</html>

猜你喜欢