動態重複/拼貼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和孩子？

回答

相關問題