Question

我一直在这里搜索和谷歌，我似乎无法找到一个非常适合我想要做的答案。我有一个div，其中包含一些文本，通过在鼠标悬停时转换为不同的背景图像来实现淡入淡出效果。我想要做的是动态地平铺/重复相同的div，以便它填充整个身体（或父div）。有点像使用background-repeat：重复但是使用div而不是背景图像。我希望看到当鼠标在它们上方移动时，整个页面中的元素可以实现什么样的炫酷视觉效果。

当然，我可以在代码中复制并粘贴相同的div多次，但必须有更好的解决方案。我认为需要javascript，但我唯一能找到的关于克隆div的东西看起来有点过头了，我想知道是否有更简单的解决方案。

我使用的CSS和HTML作为示例来自我正在处理的网站上的菜单链接。它可能不是最好的例子，但我对CSS有点新鲜。基本上我想在整个页面上平铺下面的div。

这是css：

#fadediv {
    background-image:url(images/buttonback.png);
    transition: background-image 0.5s linear;
    -moz-transition: background-image 0.5s linear;
    -webkit-transition: background-image 0.5s linear;
}

#fadediv:hover {
    background-image:url(images/buttonback2.jpg);
}

.fadedivtext {
    display:block;
    width:320px;
    height:138px;
    float:left;
    font-size:30px;
    color:#FFF;
    text-align:center;
    line-height:138px;
}

HTML代码段：

<div id="fadediv" class="fadedivtext">about me</div>

编辑：除了下面给出的javascript示例外，看起来还有一个PHP示例here可以正常工作。

Answer 1

我认为克隆应该适合你 - 它并不复杂，特别是当你谈论一个基本的div。只要确保定位类而不是ID（你不应该有多个具有相同ID的元素）。

这是使用JQuery的clone：

的基本示例

var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
    var newEl = el.clone();
    $("#container").append(newEl);
}

http://jsfiddle.net/9P7bY/2/

修改

这是aug留下的评论：

或者，如果您因某些原因希望为每个克隆提供唯一ID，您可以访问属性字段并将ID更改为其他内容

newE1.attr("id", newId);

动态重复/平铺div和孩子？

1 个答案: