jquery與vue結合的老虎機抽獎

先在index.html引入jquery.js和動畫jquery.easing.min.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <meta name="referrer" content="no-referrer" />
  <title>game</title>
  <script src='https://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
</head>

<body>
  <noscript>
    <strong>We're sorry but game doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

抽獎頁面如下 圖片換上自已頁面的圖片滑黔,注意:抽獎的獎品圖要用雪碧圖

<template>
  <div class="section">
    <div class="machine">
      <dl class="rotate_box clear">
        <dd></dd>
        <dd></dd>
        <dd></dd>
      </dl>
      <a class="poiner" href="">
        <img src="../assets/images/poiner.png" alt="" />
      </a>
      <a class="rotate_btn" href="javascript: void(0);">
        <img src="../assets/images/rocker.png" alt="" />
      </a>
      <div class="btn_box">
        <img src="../assets/images/share_btn.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import newFunction from '@/api/draw.js'
export default {
  data () {
    return {
      parizelist: [
        { prizeid: '2021', prizename: '謝謝參與' },
        { prizeid: '2022', prizename: '京東卡100元' },
        { prizeid: '2023', prizename: '話費50兌換券' },
        { prizeid: '2024', prizename: '滴滴打車5元券' }
      ],
      parize: { prizeid: '2022', prizename: '京東卡100元' }丛晦,// 中獎的獎品
    }
  },
  mounted () {
    newFunction(this.parizelist, this.parize)
  },
  methods: {

  }
}
</script>
<style scoped>
img {
  display: block;
  width: 100%;
}

.section {
  position: relative;
  margin: 0 auto;
  width: 10rem;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rebeccapurple;
}
.machine {
  width: 8.77333rem;
  height: 11.52rem;
  background: url("../assets/images/machine_bg.png");
  background-size: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.rotate_box {
  width: 60%;
  margin: 0 auto;
  padding-top: 37%;
}
.rotate_box dd {
  width: 32%;
  height: 3.46667rem;
  margin-right: 2%;
  float: left;
  background: url("../assets/images/prizes.png");
  background-size: cover;
}
.rotate_box dd:last-child {
  margin-right: 0;
}
.rotate_btn {
  width: 0.58667rem;
  height: 1.78667rem;
  overflow: hidden;
  position: absolute;
  right: 0.32rem;
  bottom: 6rem;
  transform-origin: center bottom;
}
.btn_box {
  width: 5.92rem;
  position: absolute;
  left: 50%;
  margin-left: -2.96rem;
  bottom: 2.61333rem;
}
.poiner {
  width: 0.88rem;
  position: absolute;
  right: -0.37333rem;
  top: 1.06667rem;
}
.btn_box {
  width: 5.92rem;
  position: absolute;
  left: 50%;
  margin-left: -2.96rem;
  bottom: 2.61333rem;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}
.mask img {
  width: 267px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>

接著引入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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末罐栈,一起剝皮案震驚了整個濱河市豪嗽,隨后出現的幾起案子,更是在濱河造成了極大的恐慌冕象,老刑警劉巖代承,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異渐扮,居然都是意外死亡论悴,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門墓律,熙熙樓的掌柜王于貴愁眉苦臉地迎上來膀估,“玉大人,你說我怎么就攤上這事耻讽〔齑浚” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵针肥,是天一觀的道長饼记。 經常有香客問我,道長慰枕,這世上最難降的妖魔是什么握恳? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮捺僻,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己匕坯,他們只是感情好束昵,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著葛峻,像睡著了一般锹雏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上术奖,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天礁遵,我揣著相機與錄音,去河邊找鬼采记。 笑死佣耐,一個胖子當著我的面吹牛,可吹牛的內容都是我干的唧龄。 我是一名探鬼主播兼砖,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼既棺!你這毒婦竟也來了讽挟?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤丸冕,失蹤者是張志新(化名)和其女友劉穎耽梅,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體胖烛,經...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡眼姐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了洪己。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妥凳。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖答捕,靈堂內的尸體忽然破棺而出逝钥,到底是詐尸還是另有隱情,我是刑警寧澤拱镐,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布艘款,位于F島的核電站,受9級特大地震影響沃琅,放射性物質發(fā)生泄漏哗咆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一益眉、第九天 我趴在偏房一處隱蔽的房頂上張望晌柬。 院中可真熱鬧姥份,春花似錦、人聲如沸年碘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽屿衅。三九已至埃难,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間涤久,已是汗流浹背涡尘。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留响迂,地道東北人考抄。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像栓拜,于是被迫代替她去往敵國和親座泳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內容