1.頁(yè)面代碼如下
實(shí)現(xiàn)原理：通過(guò)改變background-position-y的值展示不同圖片內(nèi)容，再利用transition實(shí)現(xiàn)動(dòng)畫(huà)效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.num{
width: 81px;
height: 71.4px;
background: url(./prize.png) center 0 repeat-y;
margin-right: 15px;
background-size: 100%;
transition-property: background-position-y;
transition-timing-function: cubic-bezier(0.6, 0.1, 0.15, .9);
}
.num1{
transition-delay: 0s;
transition-duration: 4s;
}
.num2{
transition-delay: 0.3s;
transition-duration: 5s;
}
.num3{
transition-delay: 0.6s;
transition-duration: 8s;
}
</style>
</head>
<body>
<div style="display: flex;margin-bottom: 30px">
<div class="num num1"></div>
<div class="num num2"></div>
<div class="num num3"></div>
</div>
<button>開(kāi)始抽獎(jiǎng)</button>
<script>
var drawCnt = 0; // 計(jì)數(shù)器，每抽一次獎(jiǎng)自增1
var u = 67.4; // 每個(gè)數(shù)字圖片的高度，整張長(zhǎng)圖的高度是337px
function getNum(n) {
return Math.floor(Math.random() * (n+1))
}
function getArray(maxNum, len) {
var result = [];
while (result.length < len) {
var num = getNum(maxNum);
if (result.length === (len - 1) && result.filter(item => item === num).length === (len - 1)) {
console.log('數(shù)組中元素全相同則重新生成最后一個(gè)元素！')
} else {
result.push(num);
}
}
return result;
}
function getPosition(number) {
// 每次抽獎(jiǎng)默認(rèn)先滾動(dòng)完整的六圈
return 337*6*(drawCnt + 1) + u*(5 - number)
}
function draw() {
// 生成的數(shù)組表示的是圖片的下標(biāo)0表示第一章圖片
const result = getArray(4, 3);
console.log(result)
document.getElementsByClassName('num')[0].style.backgroundPositionY = getPosition(result[0]) + 'px';
document.getElementsByClassName('num')[1].style.backgroundPositionY = getPosition(result[1]) + 'px';
document.getElementsByClassName('num')[2].style.backgroundPositionY = getPosition(result[2]) + 'px';
drawCnt++;
}
window.onload = function () {
document.getElementsByTagName('button')[0].addEventListener('click', function(){
draw();
})
}
</script>
</body>
</html>
prize.png
image.png
