jquery与vue结合的老虎机抽奖

先在index.html引入jquery.js和动画jquery.easing.min.js

抽奖页面如下 图片换上自已页面的图片，注意：抽奖的奖品图要用雪碧图

接着引入api目录下抽奖的draw.js文件

function newFunction (parizelist, parize) {
// 页面设配，可以根据自己的方式适配
  !(function (N, M) { function L () { var a = I.getBoundingClientRect().width; a / F > 540 && (a = 540 * F); var d = a / 10; I.style.fontSize = d + 'px', D.rem = N.rem = d } var K; var J = N.document; var I = J.documentElement; var H = J.querySelector('meta[name="viewport"]'); var G = J.querySelector('meta[name="flexible"]'); var F = 0; var E = 0; var D = M.flexible || (M.flexible = {}); if (H) { var C = H.getAttribute('content').match(/initial\-scale=([\d\.]+)/); C && (E = parseFloat(C[1]), F = parseInt(1 / E)) } else { if (G) { var B = G.getAttribute('content'); if (B) { var A = B.match(/initial\-dpr=([\d\.]+)/); var z = B.match(/maximum\-dpr=([\d\.]+)/); A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2))) } } } if (!F && !E) { var y = N.navigator.userAgent; var x = (!!y.match(/android/gi), !!y.match(/iphone/gi)); var w = x && !!y.match(/OS 9_3/); var v = N.devicePixelRatio; F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F } if (I.setAttribute('data-dpr', F), !H) { if (H = J.createElement('meta'), H.setAttribute('name', 'viewport'), H.setAttribute('content', 'initial-scale=' + E + ', maximum-scale=' + E + ', minimum-scale=' + E + ', user-scalable=no'), I.firstElementChild) { I.firstElementChild.appendChild(H) } else { var u = J.createElement('div'); u.appendChild(H), J.write(u.innerHTML) } } N.addEventListener('resize', function () { clearTimeout(K), K = setTimeout(L, 300) }, !1), N.addEventListener('pageshow', function (b) { b.persisted && (clearTimeout(K), K = setTimeout(L, 300)) }, !1), J.readyState === 'complete' ? J.body.style.fontSize = 12 * F + 'px' : J.addEventListener('DOMContentLoaded', function () { J.body.style.fontSize = 12 * F + 'px' }, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function (d) { var c = parseFloat(d) * this.rem; return typeof d === 'string' && d.match(/rem$/) && (c += 'px'), c }, D.px2rem = function (d) { var c = parseFloat(d) / this.rem; return typeof d === 'string' && d.match(/px$/) && (c += 'rem'), c } }(window, window.lib || (window.lib = {})))
//抽奖
  $(function () {
    var prizeList = parizelist
    var the_hei = parseInt($('.rotate_btn').css('height'))
    var rotateDd = $('.rotate_box dd')
    var ddHei = rotateDd.height()
    rotateDd.css('backgroundSize', '100% ' + prizeList.length * ddHei + 'px')
    $('.rotate_btn').click(function () {
      var _this = $(this)
      if (!_this.hasClass('act')) {
        !_this.addClass('act')
        methods.star_animate.call(this)
        if (parize == '') {
         //让奖品随机滚动 不会中奖
          $('.rotate_box dd').rotate(methods.getRandom(parizelist.length))
        } else {
          // 中奖的奖品
          $('.rotate_box dd').rotate(methods.getDataIndex(parize))
        }
      }
    })

    $.fn.extend({
      rotate: function (num, callback) {
        var zjNum = num; console.log(zjNum); $(this).each(function (index) {
          var f = $(this); setTimeout(function () {
            f.animate({ backgroundPositionY: -(ddHei * prizeList.length * 5 + zjNum[index] * ddHei) }, {
              duration: 6000 + index * 1000,
              easing: 'easeInOutCirc',
              complete: function () {
                if (index === 2) { $('.rotate_btn').removeClass('act'); if (callback) { setTimeout(function () { callback() }, 1000) } }
                f.css('backgroundPositionY', -(zjNum[index] * ddHei))
              }
            })
          }, index * 1000)
        })
      }
    })
    var methods = {
      star_animate: function () { var _this = $(this); _this.animate({ height: the_hei / 2 }, 100, 'linear'); _this.animate({ height: the_hei }, 1000, 'easeOutBounce') },
      getRandom: function (num) {
        var arr = []; var _num = num; do { var val = Math.floor(Math.random() * num); if (arr.indexOf(val) < 0) { arr.push(val); _num-- } }
        while (_num > 0); return arr
      },
      getDataIndex: function (val) {
        var prizeMsg = val; var _index; var arr = []; for (var i = 0; i < prizeList.length; i++) { $.each(prizeList[i], function () { if (prizeList[i]['prizeid'] === prizeMsg['prizeid']) { _index = i } }) }
        for (var y = 0; y < 3; y++) { arr.push(_index) }
        return arr
      }
    }
  })
}

export default newFunction