Question

我正在尝试创建一个侧滚动轮盘式动画。我的roll（）函数预先随机生成一个图像列表，然后滚动它们。

为了使我的div之外的图像不可见，我尝试设置overflow:hidden，但是，即使在div之外，所有图像仍然可见。

我的代码：

＆＃13;

function roll() {
  var tile_src = ["http://i.imgur.com/XUp8Y4r.jpg", "http://i.imgur.com/Q3suBFZ.jpg"]
  var roulette = document.getElementById("roulette");
  var tiles = []

  for (var i = 0; i < 64; i++) {
    tile = document.createElement("IMG");
    tile.id = "tile"
    tile.style.position = "fixed"
    tile.style.zIndex = "-1";
    tile.src = tile_src[Math.floor((Math.random() * 2))]
    tile.style.left = $(window).innerWidth() / 2 - 64 + i * 136 + 'px';
    tile.style.top = '16px'
    tiles.push(tile)
  }

  for (var i = 0; i < tiles.length; i++) {
    roulette.appendChild(tiles[i])
  }

}

function place_objects() {
  var ticker = document.getElementById("ticker")
  ticker.style.position = "fixed"
  ticker.style.left = $(window).innerWidth() / 2 - 16 + 'px'
  ticker.style.top = '8px'
  var roll = document.getElementById("roll")
  roll.style.position = "fixed"
  roll.style.left = $(window).innerWidth() / 2 - $("#roll").outerWidth() / 2 + 'px'
  roll.style.top = $("#ticker").height() + 16 + 'px'
  var roulette = document.getElementById("roulette")
  roulette.style.position = "fixed"
  roulette.style.left = $(window).innerWidth() / 2 - $("#roulette").outerWidth() / 2 + 'px'
  roulette.style.top = '6px'
  roulette.style.overflow = "hidden"
}

function init() {

  $(window).resize(function() {
    place_objects();
  });

  place_objects();
}

$(init)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <title>Random Pomodoro</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <style>
    @font-face {
    font-family: "Stratum";
    src: url(Stratum2-Regular.woff) format("woff");
}

.btn {
  background: #507224;
  background-image: -webkit-linear-gradient(top, #507224, #3a551b);
  background-image: -moz-linear-gradient(top, #507224, #3a551b);
  background-image: -ms-linear-gradient(top, #507224, #3a551b);
  background-image: -o-linear-gradient(top, #507224, #3a551b);
  background-image: linear-gradient(to bottom, #507224, #3a551b);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family: Stratum;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  border: solid #2a3b16 2px;
  text-decoration: none;
}

.btn:hover {
  background: #728f4e;
  border: solid #64754f 2px;
  text-decoration: none;
}

.btn:active {
  background: #3a551b;
  background-image: -webkit-linear-gradient(top, #3a551b, #507224);
  background-image: -moz-linear-gradient(top, #3a551b, #507224);
  background-image: -ms-linear-gradient(top, #3a551b, #507224);
  background-image: -o-linear-gradient(top, #3a551b, #507224);
  background-image: linear-gradient(to bottom, #3a551b, #507224);
  border: solid #64754f 2px;
  text-decoration: none;
}
    </style>
</head>

<body>

  <div id="roulette" style="width:600px; height:144px; border:solid 2px #0f0f0f;">
    <img src="http://i.imgur.com/VMfKDyq.png" id="ticker">
  </div>
  <button class="button btn" onclick="roll()" id="roll">Roll</button>
</body>

＆＃13;

出于某种原因，我的div在这里很小。当我在我的电脑上运行时，我得到了这个：

我想要的只是div中图像的部分可见。

Answer 1

演示：https://jsfiddle.net/nu5jbc50/1/

当你应用position: fixed或position: absolute时，很可能这些元素没有跟随DOM树，这意味着那些img不会显示为div#roulette的子元素{1}}。要摆脱这种情况，我会在<div class="showcase" style="width: 200%; height: 100%; "></div>

之后添加一个新容器img#ticker

HTML：

<div id="roulette" style="width:600px; height:144px; border:solid 2px #0f0f0f;">
    <img src="http://i.imgur.com/VMfKDyq.png" id="ticker">
    <div class="showcase" style="width: 200%; height: 100%; "></div>
</div>
<button class="button btn" onclick="roll()" id="roll">Roll</button>

我不会将position: fixed用于切片，而是将position: relative;应用于它，而不再为其left CSS属性赋值，我们可能会使用margin-left CSS属性。

JavaScript（仅修改了roll()）：

function roll() {
  var tile_src = ["http://i.imgur.com/XUp8Y4r.jpg", "http://i.imgur.com/Q3suBFZ.jpg"]
  var roulette = document.getElementById("roulette");
  var $showcase = $(".showcase");
  var tiles = []

  for (var i = 0; i < 64; i++) {
    tile = document.createElement("IMG");
    tile.id = "tile"
    tile.style.position = "relative";
    tile.style.zIndex = "-1";
    tile.src = tile_src[Math.floor((Math.random() * 2))];
    //tile.style.left = $(window).innerWidth() / 2 - 64 + i * 136 + 'px';
    tile.style.top = '16px';
    if (i > 0) tile.style.margin = '0 0 0 32px';
    else tile.style.margin = '0 0 0 ' + ($(roulette).innerWidth() / 2 - 64).toString() + 'px';
    tiles.push(tile);
  }

  for (var i = 0; i < tiles.length; i++) {
    $showcase.append($(tiles[i]));
  }

}

还将以下内容应用于演示动画的CSS：

div.showcase > *:first-child {
  -webkit-transition: 64s linear;
  transition: 64s linear;
}

通过以下方式调用动画：

  setTimeout(function(){
    $showcase.find(">*").first().css("margin-left", ((128 * tiles.length) * -1).toString() + 'px');
  }, 1);

显示div外部溢出的图像：隐藏

1 个答案: