Question

我试图制作一个带有淡化块动画的滑块，就像here一样。麻烦的是，在我的情况下，我试图全屏，这意味着高度和宽度将是可变的。这意味着背景位置技巧不会起作用，因为它不会调整背景大小以适应屏幕，而是按照原样进行操作[＆＃39;它更容易看到here（请记住， #slides 将是高度100％和宽度100％以及 .slide＆gt; 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的{{1}}上出现浮动时，问题可能会发生。因此，使用width来获得精确的大小，并向下舍入，这可能会牺牲一些像素，以确保块不会溢出到下一行。 jsfiddle

document.documentElement.getBoundingClientRect();

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

褪色块动画全屏

1 个答案: