3

私はこことGoogleで検索を行ってきましたが、私がやろうとしていることにぴったりの答えが見つからないようです. マウスのホバー時に別の背景画像に遷移することでフェード効果を行うテキストを含む単一の div があります。私がしたいのは、同じdivを動的にタイル/繰り返して、ボディ全体(または親div)を埋めることです。background-repeat: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 の例がここにあるようです。

4

1 に答える 1

2

クローンはあなたにとってうまくいくはずです-特に基本的な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-02T00:47:45.323 に答える