1

我的 jQuery：

$(document).ready(function() {
    $('.display').mouseenter(function() {
         $(this).fadeTo('fast',0);
    });
    $('.display').mouseleave(function() {
         $(this).fadeTo('fast',1);
    });
});

我的 CSS：

div {
    display:inline-block;
}

.display {
    padding:10px;
}

.bluespot {
    height:10px;
    width:10px;
    border-radius:100%;
    background-color:blue;
}

.redspot {
    height:10px;
    width:10px;
    border-radius:100%;
    background-color:red;
}

我的 HTML：

<div>
    <div class='display'><div class='bluespot'></div></div>
    <div class='display'><div class='redspot'></div></div>
</div>

请看这里http://jsfiddle.net/andrewtanner/ZyEKz/1/

我想要做的是重复这些红色和蓝色 CSS 类作为背景，最好是相对于用户屏幕。我可以通过简单地粘贴更多代码来一遍又一遍地重复这些类，但这似乎并不是特别有效，而且它只会是一个绝对值。当它不是图像背景时，是否有任何方法可以重复 CSS，即 background-repeat 元素？

4

2 回答 2

1

你可以做的是用javascript动态添加你的“spots”div。这是主要思想：

  • 你得到屏幕的宽度和高度
  • 你把它们都除以一个点的宽度和高度
  • 您遍历高度点的数量
  • 在这个循环中，您再次循环使用宽度上的点数

也许最好用这个Fiddle来观察它

这是循环：

// spots are 30x30 squares
// how much can we put in height ? 
number_h = parseInt(window_h / 30);
// in width
number_w = parseInt(window_w / 30);

for(var h_it = 0; h_it < number_h; h_it++)
{
    for(var w_it = 0; w_it < number_w; w_it++)
    {
        // to make one blue, one red, one blue... 
        // and change the order the next line
        if(w_it%2 === h_it%2) {
            $('<div class="display"><div class="bluespot"></div></div>')
                .appendTo('#container');
        } else {
            $('<div class="display"><div class="redspot"></div></div>')
                .appendTo('#container');
        }
    }
}

当然这可能并不完美，但至少你明白了。

这是一个更复杂的 Fiddle，带有居中容器并在 Windows 调整大小事件时刷新：http:
//jsfiddle.net/ZyEKz/10/

于 2013-07-11T19:02:08.463 回答
0

好吧，我想出了一种使用克隆的方法，我也在 Twitter 上使用它（这里是：http: //jsfiddle.net/bmgh1985/LfHC8 - 编辑：必须输入代码......）

$(document).ready(function () {
    var numberOfClones = 7;
    var el = $('.display');
    for (i = 0; i < numberOfClones; i++) {
        var newEl = el.clone();
        $('.display').append(newEl);

}

但是 Brewal 的解决方案效果很好，并且在大多数情况下效果更好。

于 2013-07-11T20:11:55.547 回答