css实现一个简单的老虎机

作者: wur1 | 来源:发表于2019-01-14 17:10 被阅读0次

css实现一个简单的老虎机
iOS--老虎机的抽奖实现
css3实现图片横向无缝滚动的效果
Android UI 老虎机
清除浮动的几种常用方法
2018-11-04
正方体旋转css简单实现
CSS之过渡transition
css3 加载loading图标实现
css 实现矩形四个边角加粗

1.页面代码如下
实现原理：通过改变background-position-y的值展示不同图片内容，再利用transition实现动画效果；

<!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>开始抽奖</button>
  <script>
    var drawCnt = 0; // 计数器，每抽一次奖自增1
    var u = 67.4; // 每个数字图片的高度，整张长图的高度是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('数组中元素全相同则重新生成最后一个元素！')
        } else {
          result.push(num);
        }
      }
      return result;
    }

    function getPosition(number) {
      // 每次抽奖默认先滚动完整的六圈
      return 337*6*(drawCnt + 1) + u*(5 - number)
    }

    function draw() {
      // 生成的数组表示的是图片的下标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>

背景图如下