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

Question

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

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

我的代码：

 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)

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

由于某种原因，我的div在这里很小。 当我在PC上运行它时，得到以下信息：

我想要的是仅使div内的图像部分可见。

Answer 1

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

当您应用position: fixed或position: absolute ，此类元素很可能未遵循DOM树，这意味着这些img不会显示为div#roulette子代。 为了摆脱这一点，我将在img#ticker之后添加一个新容器<div class="showcase" style="width: 200%; height: 100%; "></div>

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 个解决方案

解决方案1
0 2016-09-12 04:30:58

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

问题描述

1 个解决方案

解决方案1 0 2016-09-12 04:30:58

解决方案1
0 2016-09-12 04:30:58