先在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
