2

ページの下部でページ幅全体にまたがるように、似たような木 (種類) と葉が必要で、それらがたくさんあるページに取り組んでいます。私はそれを2つの方法で行うことを考えていました.1つは最初に1つのセット（ツリーとリーブ）を作成し、次にjqueryを使用してそれを複製するか、もう1つは基本的にページ自体にそれらすべてのhtmlタグを書き込むことです. 明らかに、それは多くの html タグを持つことを意味します。

ツリー グループの HTML:

    <div class="tree-group-avg">
            <div class="small-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>
            <div class="avg-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>
            <div class="large-tree">
                <span class="left-leaf"></span>
                <span class="right-leaf"></span>
            </div>            
      </div>

CSS:

.tree-group-avg {margin:0 15px;display:inline-block; }
.tree-group-avg div {position:relative;}
.tree-group-avg .large-tree {background:#83919F; width:2px; height:70px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .avg-tree {background:#83919F; width:2px; height:50px; display:inline-block; margin:0 5px -5px 0}
.tree-group-avg .small-tree {background:#83919F; width:2px; height:30px; display:inline-block; margin:0 5px -5px 0} 
.left-leaf {width:10px; height:10px; border-radius:0 10px 0 10px; display:inline-block; background:#ACCF37; position:absolute; left:-10px;}
.right-leaf {width:10px; height:10px; border-radius:10px 0 10px 0; display:inline-block; background:#ACCF37; position:absolute; top:15px;}

気を付けないといけないのは、木の高さが違うので、小さい木よりも大きい木では3枚の葉が必要になる可能性があります。そのために私は2つの方法を考えました.htmlで異なるリーフを異なるcssの「トップ」プロパティ値で直接使用するか、jsまたはjqueryを介してこの全体を実行し、ツリーの高さと各リーフの変更された「トップ」値を計算します.

セットの jsfiddle : http://jsfiddle.net/npT47/

達成されるものの正確なイメージ:ここに画像の説明を入力

4

3 に答える 3

2

アップロードした画像とまったく同じものを実現したい場合は、HTML と言います。作成する必要があるループには、画像の半分 (31 本の木 (パターンがそこで終了するため)) と同じ幅のループ (複製可能) のベース HTML が必要になります。仕方。

JS が優れている唯一の方法は、全幅のカバレッジ (ビューポート) が必要で、必要な繰り返しの量を計算する必要がある場合です。

于 2013-09-24T09:02:25.523 に答える
2

私はあなたのフィドルを編集しました。jqueryを使用して理解したように、htmlにdivを動的に追加しました。このフィドルを見てください。 jsfiddle.net/npT47/6/

$(document).ready(function(){
    var tree="";
    var treeClass=["small-tree","avg-tree","large-tree"];
    for(var i=0;i<3;i++){
        tree+='<div class="'+treeClass[i]+'">'+
            '<span class="left-leaf"></span>'+
                '<span class="right-leaf"></span></div>';

    }    
    $("#treeDiv").html(tree);
});

ありがとう。

于 2013-09-24T08:08:15.307 に答える