1

如何使用平铺中的重复图像填充网站，就像background-repeat: repeat;使用 CSS 或 Javascript 使其旋转一样？

要旋转单个图像，我可以使用 CSS：

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}                                               

img#id {                                            
    -webkit-animation-name:             spin;  
    -webkit-animation-duration:         5s;    
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;  
    -moz-animation-name:                spin;  
    -moz-animation-duration:            5s;    
    -moz-animation-iteration-count:     infinite;
    -moz-animation-timing-function:     linear; 
    -ms-animation-name:                 spin;  
    -ms-animation-duration:             5s;    
    -ms-animation-iteration-count:      infinite;
    -ms-animation-timing-function:      linear; 
}

但是我不知道如何对重复的图像执行此操作，即访问背景图像作为元素或重复 a<img>并用给定的图像填充整个页面，例如background-repeat.

这是旋转单个图像的示例。

4

1 回答 1

1

根据您的要求，我做了这样的事情，虽然我认为这是一个糟糕的选择，而且它可以做得更好......

-------更新了 ------- 好吧，我让代码更干净......

jsFiddle Demo 更新

(function () {
    var left = 0,
        top = 0,
        background = document.getElementById("background"),
        getWidth = document.width,
        getHeight = document.height,
        imageSize = 240,
        width = 960,
        height = 960,
        countPerLine = 4,
        countOfImages = 16,
        difference = 0;

    function setParameters() {
        if (getWidth > width) {
            width = getWidth;
            countPerLine = Math.floor(getWidth / imageSize);
            difference = getWidth % imageSize;
            imageSize += Math.round(difference / countPerLine);
        }
        if (getHeight > height) {
            countOfImages = Math.floor(getHeight / imageSize);
            countOfImages *= countPerLine;
        }
    }

    function setBackground() {
        for (var i = 0; i < countOfImages; i++) {
            var div = document.createElement("div");

            div.classList.add("bgr");
            div.style.width = imageSize + "px";
            div.style.height = imageSize + "px";
            div.style.backgroundSize = "100% 100%";
            background.appendChild(div);

            if (i === 0) {
                div.style.left = "0px";
                div.style.top = "0px";
            } else {
                left += imageSize;
                if (left >= width) {
                    left = 0;
                    top += imageSize;
                }
                div.style.left = left + "px";
                div.style.top = top + "px";
            }
        }
    }

    setParameters();
    setBackground();
}());
于 2013-04-10T23:14:43.157 回答