圖像顯示在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