首页 网站特效 PHP/Mysql 网站模板 视频教程 整站源码 云服务器 免责声明

素材码 > 抽奖 > 一款jQuery可指定奖品手机大转盘抽奖代码

一款jQuery可指定奖品手机大转盘抽奖代码

更新时间:2019-01-21 码币:1
357058607
一款jQuery可指定奖品手机大转盘抽奖代码 应用简介

一款jQuery可指定奖品手机移动端大转盘抽奖代码,界面十分精美,还带中奖名单滚动效果。

js代码

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.rotate.min.js" ></script> 
<script type="text/javascript" src="js/swiper-3.4.2.jquery.min.js" ></script> 
<script> 
    //只需要更换turnplate的id就可以更换相应的奖品 
    var turnplate={ 
          restaraunts:["iphone x""100话费红包""周大福吊坠""50个赠币""爱奇艺月卡""1个赠币""欧乐B牙刷""1个积分"],       //大转盘奖品名称 
          rotateFlag:false,      //false:停止;ture:旋转 
          id:1     //抽中的id 1:iphone x  2:100话费红包   3:周大福吊坠 ...... 
      }
      $(document).ready(function(){ 
        //旋转转盘 item:奖品位置; txt:提示语; 
        var rotateFn = function (item, txt){ 
              var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2)); 
              if(angles<270){ 
                angles = 270 - angles;  
              }else{ 
                angles = 360 - angles + 270
              } 
              $('.turntable_box').stopRotate(); 
             $('.turntable_box').rotate({ 
                   angle:0
                animateTo:angles+1800+22.5
                duration:8000
                   callback:function (){ 
                     alert(txt); 
                      turnplate.rotateFlag = !turnplate.rotateFlag; 
                } 
              }); 
        }
     
        $('.pointer').click(function (){ 
              if(turnplate.rotateFlag)return
              turnplate.rotateFlag = !turnplate.rotateFlag; 
              var item = turnplate.id; 
              //指针落在对应奖品区域的中心角度 
              rotateFn(item-2, turnplate.restaraunts[item-1]); 
              //console.log(item); 
        });     
         
        var swiper = new Swiper('.list'{ 
              direction: 'vertical'
              autoplay: true, 
              speed:1300
              loop:true 
        }); 
       
    });   
</script>


  • 收藏
  • 投诉
手机扫码直达本页
你可能喜欢
评论列表