节假日必备的抽奖功能

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

前言

每逢节日不免有活动抽奖来活跃一下节日的气氛，这里分享一个实用的抽奖功能。

抽奖效果

点击开始抽奖数字上下滚动，点击停止出现中奖号码。

准备工作

准备两张关键的图片，第一张图框框内容需要透明的。

图一：图二：

具体实现

创建一个图一背景块
创建七个图二的背景块定位在图一个框框中

<div class="contain">
  <img src="图一" />
  <div class="content">
    <span class="s1"></span>
    <span class="s2"></span>
    <span class="s3"></span>
    <div class="s4"></div>
    <span class="s5"></span>
    <span class="s6"></span>
    <span class="s7"></span>
    <span class="s8"></span>
  </div>
</div>

.content span {
    background-image: url('图二');
    background-size: 99.9% 1000%;
    background-position: center 100%;
    display: block;
    height: 100%;
}

创建开始抽奖按钮并绑定点击事件

<img class="start" onclick="run()" src="">

var u = 11.1;
var timeLen = 50;
var n = 1;
function run() {
  n++;
  $(".content span").each(function (index) {
    var _num = $(this);
    _num.animate({
      backgroundPositionY: ((u + 1) * n * (index / 10 + 1)) + '%'
    }, {
      queue: false,
      duration: timeLen
    });
  });
  timer = window.setTimeout(run, timeLen);
}

创建停止按钮并绑定停止事件

<img class="stop" onclick="stop()" src="">
var phone = '13888666666';
var resH = (phone + '').slice(0, 3);
var resE = (phone + '').slice(-4);
var result = resH + resE; //指定中奖结果,可以抽取指定数组中的某一个
var num_arr = (result + '').split('');

function stop() {
  $(".content span").each(function (index) {
    var _num = $(this);
    // 滚动到具体数字的位置
    _num.animate({
      // 1---88 0-99
      backgroundPositionY: 99.9 - (u * num_arr[index]) + '%'
    }, {
      queue: false,
      duration: 50
    });
  });
  window.clearTimeout(timer);
}

分析

主要是通过改变七个款款数字背景图（图二）中的background-position-y值来实现数字的上下滚动，停止的时候通过计算（图二）各个数字所在的位置来定位backgroundPositionY显示最后中奖的数字。