javascript - 我怎样才能让这个动画响应？

Question

你好， 首先，我是编程和这个站点的新手，所以请不要攻击我:)

所以，我刚刚开始了一个新元素(具有 Steam 登录数据的赌博网站) 该站点包含四种“游戏”(Crash、Dice、Roulete、Trade up)。 我目前正在研究轮盘赌，我需要寻求帮助。 我找到了一个关于这个的代码，我已经修改它以“完美”地工作。 我在我的手机上查看了该页面，但效果不佳，在第一次旋转后它向后移动并且动画完全崩溃(移动了大约 3 个数字，等等......)。我尝试使用 css (background-size: cover) ，但它弄乱了像素并且没有旋转到正确的数字。我想，此代码计算调整后页面的背景宽度并将其滚动到完美的数字。

感谢您的帮助。

代码如下:

--JS--

    var socket = io.connect("http://94.248.229.179:3000");
    var button = $('.button');
    var items = $('.items');
    var coin_width = 75;
    var numbers = {
      0: 525,
      1: 0,
      2: 150,
      3: 300,
      4: 450,
      5: 675,
      6: 825,
      7: 975,
      8: 1050,
      9: 900,
      10: 750,
      11: 600,
      12: 375,
      13: 225,
      14: 75
    };

        socket.on("roulettenumber", function(data){
      var number = data.roulettenumber;
      var cycles = Math.floor(getRandomArbitrary(2, 8));
      var dev = getRandomArbitrary(0, 72);
      var scroll_amount = ((825 + numbers[number]) + dev) + (1125 * cycles);
      items.removeClass("spin_animation");
      items.css({"background-position-x": "-262.5px"});
      setTimeout(function(){
          items.addClass("spin_animation");
          items.css({"background-position": "-" + scroll_amount + "px"});
        console.log("W: " + number + " SA: " + scroll_amount + " D: " + dev + " C: " + cycles);
      }, 10);
        });

    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }

--CSS--

    .wrapper {
      overflow: hidden;
      width: 600px;
    }

    .items {
      background-image: url("../img/roulette.png");
        position: relative;
        width: 1125px;
        height: 75px;
    }

    .items:before {
        content: "";
        position: absolute;
        background: #ffd02d;
        height: 100%;
        width: 3px;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

    .spin_animation {
            transition-timing-function: cubic-bezier(0.34, 0.87, 0.52, 1); /* custom */
                transition-duration: 6.79891s;
    }

--HTML--
    <div class="wrapper">
      <button class="button">Spin</button>
      <div class="items"></div>
    </div>

Answer 1

您的 CSS 代码中有些东西看起来很奇怪，包装器的宽度比它的子项大，您可能需要先修复它。

关于页面的响应能力，您只有 2 个大于屏幕宽度的元素(.wrapper 和 .items)，css 文件底部的这个媒体查询应该可以完成这项工作:

@media only screen and (max-width : 1024px) {
  .wrapper {
    width: 100%;
  }
  .items {
    width: 100%;
  }
}

不要忘记将此元标记添加到 html 文件的 header 部分:

<meta name="viewport" content="width=device-width, initial-scale=1.0">