褪色块动画全屏

Question

我正在尝试制作带有渐变块动画的滑块，就像here 一样。麻烦的是，就我而言，我正在尝试全屏，这意味着高度和宽度将是可变的。这意味着 background-position 技巧将不起作用，因为它不会调整背景大小以适应屏幕，而是将其“原样”。更容易看到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';
    }
}

}

Answer 1

经cmets反馈，window的width有float可能会出现问题。所以使用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">