lottery

功能描述

网页转盘抽奖插件特效代码

依赖的模块

jquery swiper

使用方法

  1.     <!--结果弹窗结束-->
  3.     <script>
  4.         var luck = {
  5.             index: 0, //当前转动到哪个位置，起点位置
  6.             count: 0, //总共有多少个位置
  7.             timer: 0, //setTimeout的ID，用clearTimeout清除
  8.             speed: 20, //初始转动速度
  9.             times: 0, //转动次数
  10.             cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
  11.             prize: -1, //中奖位置
  12.             init: function(id) {
  13.                 if($("#" + id).find(".luck-unit").length > 0) {
  14.                     $luck = $("#" + id);
  15.                     $units = $luck.find(".luck-unit");
  16.                     this.obj = $luck;
  17.                     this.count = $units.length;
  18.                     $luck.find(".luck-unit-" + this.index).addClass("active");
  19.                 };
  20.             },
  22.             roll: function() {
  23.                 var index = this.index;
  24.                 var count = this.count;
  25.                 var luck = this.obj;
  26.                 $(luck).find(".luck-unit-" + index).removeClass("active");
  27.                 index += 1;
  28.                 if(index > count - 1) {
  29.                     index = 0;
  30.                 };
  31.                 $(luck).find(".luck-unit-" + index).addClass("active");
  32.                 this.index = index;
  33.                 return false;
  34.             },
  35.             stop: function(index) {
  36.                 this.prize = index;
  37.                 return false;
  38.             }
  39.         };
  41.         function roll() {
  42.             luck.times += 1;
  43.             luck.roll();
  44.             if(luck.times > luck.cycle + 10 && luck.prize == luck.index) {
  45.                 clearTimeout(luck.timer);
  46.                 luck.prize = -1;
  47.                 luck.times = 0;
  48.                 click = false;
  49.             } else {
  50.                 if(luck.times < luck.cycle) {
  51.                     luck.speed -= 10;
  52.                 } else if(luck.times == luck.cycle) {
  53.                     var index = Math.random() * (luck.count) | 0;
  54.                     if(index > 5) {
  55.                         index = 7;
  56.                     } else {
  57.                         index = 5;
  58.                     }
  59.                     luck.prize = index; //最终中奖位置
  60.                 } else {
  61.                     if(luck.times > luck.cycle + 10 && ((luck.prize == 0 && luck.index == 7) || luck.prize == luck.index + 1)) {
  62.                         luck.speed += 110;
  63.                     } else {
  64.                         luck.speed += 20;
  65.                     }
  66.                 }
  67.                 if(luck.speed < 40) {
  68.                     luck.speed = 40;
  69.                 };
  71.                 luck.timer = setTimeout(roll, luck.speed);
  72.             }
  73.             return false;
  74.         }
  76.         var click = false;
  77.         window.onload = function() {
  78.             luck.init('luck');
  79.             $("#btn").click(function() {
  81.                 setTimeout(function() {
  82.                     $(".cover").removeClass("dis_no");
  83.                     $(".cover_box").removeClass("dis_no");
  84.                     $("body,html").css({
  85.                         "height": "100%",
  86.                         "overflow": "hidden"
  87.                     })
  88.                 }, 4000);
  90.                 if(click) {
  91.                     return false;
  92.                 } else {
  93.                     luck.speed = 100;
  94.                     roll();
  95.                     click = true;
  96.                     return false;
  97.                 }
  99.             });
  100.         };
  102.         //            轮播图
  103.         var swiper = new Swiper('.draw-container', {
  104.             direction: "vertical",
  105.             autoplay: true,
  106.             loop: true,
  107.         });
  109.         //ios弹窗位置调整
  110.         $("input").bind('focus', function() {
  111.             var top = document.body.scrollTop;
  112.             $(window).scrollTop(top);
  113.         })
  114.         $("input").bind('blur', function() {
  115.             var top = document.body.scrollTop;
  116.             $(window).scrollTop(top);
  117.         })
  118.         //关闭弹窗
  119.         $(".close").on("click", function() {
  120.             $(".cover").addClass("dis_no");
  121.             $(".cover_box").addClass("dis_no");
  122.             $("body,html").css({
  123.                 "height": "100%",
  124.                 "overflow": "auto"
  125.             })
  126.         })
  127.         $("#form_insure").on("click", function() {
  128.             $(".cover_box").addClass("dis_no");
  129.             $(".result_box").removeClass("dis_no");
  130.             $("body,html").css({
  131.                 "height": "100%",
  132.                 "overflow": "hidden"
  133.             })
  134.         })
  135.     </script>