褪色塊動畫全屏

Question

我正在嘗試使用褪色塊動畫製作滑塊，就像here。麻煩的是，在我的情況下，我試圖全屏顯示，這意味着高度和寬度將是可變的。這意味着背景位置技巧將不起作用，因爲它不會調整背景以適合屏幕，而是將其視爲「原樣」。這很容易看到here（請記住，＃滑動將是高度100％和寬度100％以及.slide> img）。我已經跑出了想法來解決它，任何幫助將不勝感激。我寧願不使用jQuery，但如果有必要，它會沒事的。

預先感謝您。

我的劇本至今是：

function animateBlocks(x,y,speed) { 
var width = document.getElementById('slides').offsetWidth; 
var height = document.getElementById('slides').offsetHeight; 
var newWidth = width/x; 
var newHeight = height/y; 

for (var i = 0; i<(x*y); i++) { 
    var newDiv = document.createElement("div"); 

    document.getElementsByClassName('active-slide')[0].appendChild(newDiv); 
    newDiv.className = "slide-block"; 
    newDiv.style.width = newWidth + 'px'; 
    newDiv.style.height = newHeight + 'px'; 
    newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")'; 
    newDiv.style.backgroundPosition = ('-' + newDiv.offsetLeft + 'px ' + '-' + newDiv.offsetTop + 'px'); 

    if (i == x*y-1) { 
     document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none'; 
    } 
} 

}

Answer 1

的意見反饋後，當有浮於window的width可能發生的問題。因此，使用document.documentElement.getBoundingClientRect();來獲得精確的大小，並舍入，這可能會犧牲一些像素，以確保塊不會溢出到下一行。 jsfiddle

function animateBlocks(x,y,speed) { 
 
    var img = document.querySelector('#slides img'); 
 
    var viewPortSize = document.documentElement.getBoundingClientRect(); 
 
    // Round down if there's floating points on width. 
 
    var windowWidth = Math.floor(viewPortSize.width); 
 
    var windowHeight = window.innerHeight; 
 
\t var newWidth = windowWidth/x; 
 
\t var newHeight = windowHeight/y; 
 
    
 
    var newDiv; 
 
    var domFrag = document.createDocumentFragment(); 
 
    var i, j; 
 
    for (i = 0; i < y; i +=1) { 
 
     for (j = 0; j < x; j += 1) { 
 
      newDiv = document.createElement("div"); 
 
      domFrag.appendChild(newDiv); 
 
      newDiv.className = "slide-block"; 
 
      newDiv.style.width = newWidth + 'px'; 
 
      newDiv.style.height = newHeight + 'px'; 
 
      newDiv.style.backgroundImage = 'url("' + document.getElementsByClassName('active-slide')[0].firstElementChild.src + '")'; 
 
      newDiv.style.backgroundSize = windowWidth + 'px ' + windowHeight + 'px'; 
 

 
      newDiv.style.backgroundPosition = ('-' + newWidth*j + 'px ' + '-' + newHeight*i + 'px'); 
 
     } 
 
    } 
 
    
 
    for (var i = 0; i<(x*y); i++) { 
 

 
\t } 
 
    document.getElementsByClassName('active-slide')[0].appendChild(domFrag); 
 
    document.getElementsByClassName('active-slide')[0].firstElementChild.style.display = 'none'; 
 
}

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    overflow: hidden; /* makes the scroll bar disappear. */ 
 
} \t 
 

 
#slides { 
 
\t \t position: relative; 
 
\t \t height: 100px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
\t } 
 
\t 
 
\t .slide { 
 
\t \t position: absolute; 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t \t display: none; 
 
\t } 
 
\t 
 
\t .slide>img { 
 
\t \t position: absolute; 
 
\t \t left: 0; 
 
\t \t top: 0; 
 
\t \t height: 100px; 
 
\t } 
 
\t 
 
\t .active-slide { 
 
\t \t display: block; 
 
\t } 
 

 
.slide-block { 
 
\t float: left; 
 
}

<button onclick="animateBlocks(5,5,0)">Click here to see how it looks</button> 
 
<ul id="slides"> 
 
\t <li class="slide active-slide"> 
 
\t \t <img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"> 
 
\t </li> 
 
</ul> 
 
    <br><br><br><br><br><br> 
 
    <p>How it should look</p> 
 
    <img style="height: 100px;" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">