转盘抽奖程序PC、移动版

本文由清尘发表于2016-01-29 15:13最后修改于2016-06-29属于jQuery移动前端分类

PC版应用jQueryRotate插件。

PC演示: https://blog.ipsfan.com/demo/demopage/10/

移动版改用原生CSS3动画实现:

移动版演示地址:https://blog.ipsfan.com/demo/demopage/10/web.html

移动版JS:

$.fn.rotate = function(options){
    var defaults = {
         angle:0, 
        animateTo: 2160,
        callback:function(){}
    },

    opts = $.extend(defaults,options),
    amStyle = $('#amStyle');
    var keframes = '@keyframes zPanimation{0%{transform:rotate('+opts.angle+'deg);-webkit-transform:rotate('+opts.angle+'deg)}100%{transform:rotate('+opts.animateTo+'deg);-webkit-transform:rotate('+opts.animateTo+'deg)}}@-webkit-keyframes zPanimation{0%{transform:rotate('+opts.angle+'deg);-webkit-transform:rotate('+opts.angle+'deg)}100%{transform:rotate('+opts.animateTo+'deg);-webkit-transform:rotate('+opts.animateTo+'deg)}}';
    amStyle.html(keframes);

    $(this).addClass('amClass').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',function(){
        opts.callback();
        $(this).css({'transform':'rotate('+opts.animateTo+'deg)','-webkit-transform':'rotate('+opts.animateTo+'deg)'});
         $(this).removeClass('amClass');
    })

}


  var timeOut = function(){  //超时函数
    $("#lotteryBtn").rotate({
      angle:0, 
      animateTo: 2160,
      callback:function(){
        alert('网络超时')
      }
    }); 
  }; 
  var rotateFunc = function(awards,angle,text){ 
    $("#lotteryBtn").rotate({
      angle:0, 
      animateTo: angle+1440, 
      callback:function(){
        alert(text)
      }
    }); 
  };
  
  $('#lotteryBtn').bind('click',function(){
            var time = [0,1];
          time = time[Math.floor(Math.random()*time.length)];
        if(time==0){
          timeOut(); //网络超时
        }
        if(time==1){
          var data = [1,2,3,4,5,0]; //返回的数组
            data = data[Math.floor(Math.random()*data.length)];
          if(data==1){
            rotateFunc(1,0,'恭喜您抽中5元优惠券')
          }
          if(data==2){
            rotateFunc(2,118,'恭喜您抽中1000积分')
          }
          if(data==3){
            rotateFunc(3,176,'恭喜您抽中杜蕾丝避孕套')
          }
          if(data==4){
            rotateFunc(4,237,'恭喜您抽中再来一次')
          }
          if(data==5){
            rotateFunc(5,295,'恭喜您抽中500积分')
          }
          if(data==0){
            rotateFunc(0,60,'谢谢参与')
          }
        }
  })

CSS部分:

.zp { position: relative;height: 14.6rem; }
.ly-plate { position: relative; width: 13.35rem; height: 13.35rem; margin: 0 auto; top: 0.75rem; }
.rotate-bg { width: 13.35rem; height: 13.35rem; background: url('ly-plate.jpg'); position: absolute; top: 0; left: 0; background-size: contain; }
.ly-plate div.lottery-star { width: 7.25rem; height: 7.25rem; position: absolute; top: 3.05rem; left: 3.05rem; outline: none; }
.ly-plate div.lottery-star #lotteryBtn { cursor: pointer; position: absolute; left: 0; top: 0; width: 7.25rem; height: 7.25rem; }
.amClass { animation: zPanimation 5s linear; -webkit-animation: zPanimation 5s linear; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; }