Javascript 动态重复/平铺div和child?
我在这里和谷歌上做了一些搜索,但我似乎找不到一个完全符合我的想法的答案。我有一个单独的div,其中有一些文本,通过鼠标悬停时转换到不同的背景图像来实现淡入淡出效果。我想做的是动态地平铺/重复同一个div,以便它填充整个主体(或父div)。有点像使用背景重复:重复,但使用div而不是背景图像。我喜欢看到当鼠标在整个页面上移动时,整个页面上的元素淡入淡出,我可以实现什么样的酷视觉效果 当然,我可以在代码中多次复制和粘贴同一个div,但肯定有更好的解决方案。我认为javascript是必要的,但我能找到的关于克隆div的唯一东西似乎有点让我不知所措,我想知道是否有更简单的解决方案 我正在使用的CSS和HTML作为示例,来自我正在处理的站点上的菜单链接。这可能不是最好的例子,但我对CSS有点陌生。基本上我想在整个页面上平铺下面的div 以下是css:Javascript 动态重复/平铺div和child?,javascript,css,repeat,Javascript,Css,Repeat,我在这里和谷歌上做了一些搜索,但我似乎找不到一个完全符合我的想法的答案。我有一个单独的div,其中有一些文本,通过鼠标悬停时转换到不同的背景图像来实现淡入淡出效果。我想做的是动态地平铺/重复同一个div,以便它填充整个主体(或父div)。有点像使用背景重复:重复,但使用div而不是背景图像。我喜欢看到当鼠标在整个页面上移动时,整个页面上的元素淡入淡出,我可以实现什么样的酷视觉效果 当然,我可以在代码中多次复制和粘贴同一个div,但肯定有更好的解决方案。我认为javascript是必要的,但我能找
#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示例可以使用。我认为克隆应该适合您——它没有那么复杂,特别是在您谈论基本div时。只需确保以类而不是ID为目标(您不应该有多个具有相同ID的元素) 下面是使用JQuery的一个基本示例:
哇,谢谢你!这看起来几乎正是我想要的。也谢谢你的例子,我发现克隆的用法令人困惑,但我认为我可以解决这个问题。
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}
newE1.attr("id", newId);