动态重复/拼贴div和孩子？

我一直在这里做一些搜索，谷歌和我似乎无法找到一个非常适合我想要做的答案。我有一个单独的div，里面有一些文本，通过在鼠标悬停时转换到不同的背景图像来实现淡入淡出效果。我想要做的是动态地平铺/重复同一个div，以便填充整个body（或父div）。有点像使用背景重复：重复，但与div而不是背景图像。我喜欢看到当鼠标移动到整个页面时，整个页面中的元素会随着鼠标的移动而逐渐消失，从而达到什么样的酷炫视觉效果。动态重复/拼贴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>

编辑：看起来像有一个PHP例子here可以工作，除了下面给出的JavaScript示例。

来源

2012-12-02 user1869575

我认为克隆应该适合你 - 这并不复杂，特别是当你谈论一个基本的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);

来源

2012-12-02 00:47:45 McGarnagle

哇，谢谢你的东西！这看起来几乎正是我所期待的。感谢这个例子，我发现克隆的使用混乱，但我认为我可以用这个工作。 – user1869575

动态重复/拼贴div和孩子？

回答

相关问题