javascript - 衰落块动画全屏

我正在尝试制作带有衰落块动画的滑块，就像here一样。麻烦的是，就我而言，我正尝试全屏显示，这意味着高度和宽度会变化。这意味着背景位置技巧不起作用，因为它不会调整背景大小以适合屏幕，而是“按原样”使用它。容易看到here（请注意，#slides的高度为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';
    }
}

}

最佳答案

在反馈意见后，当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;
	var newWidth = windowWidth / x;
	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++) {

	}
    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. */
}

#slides {
		position: relative;
		height: 100px;
        margin: 0px;
        padding: 0px;
	}

	.slide {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		display: none;
	}

	.slide>img {
		position: absolute;
		left: 0;
		top: 0;
		height: 100px;
	}

	.active-slide {
		display: block;
	}

.slide-block {
	float: left;
}

<button onclick="animateBlocks(5,5,0)">Click here to see how it looks</button>
<ul id="slides">
	<li class="slide active-slide">
		<img src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg">
	</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">