2

我正在处理一个页面，我需要有一些类似的树（种类）并在它们上面留下很多叶子，就像跨越页面底部的页面宽度一样。我正在考虑以两种方式进行操作，一种可能是先创建一组（树并离开），然后使用 jquery 克隆它，另一种可能是基本上在页面本身中为所有这些标签编写 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 片叶子在较大的树上而不是较小的树上。为此，我想到了两种方法，要么直接在 html 中使用具有不同 css“top”属性值的不同叶子，要么通过 js 或 jquery 完成整个事情，其中​​计算树的高度并修改每个叶子的“top”值.

一组 jsfiddle：http: //jsfiddle.net/npT47/

要实现的确切图像：在此处输入图像描述

4

3 回答 3

2

HTML 和 JS 是不同的，你不能只写 JS 的片段来创建页面，你不能Dynamic只使用 HTML 来创建网页。

你需要融合两者。

我见过你的小提琴，到目前为止做得很好。但我发现的共同点是，您在一个共同的间隔之后创建一个潜在客户，让我们说10px每个。在 10 px 之后，您正在创建一个新叶子。而且高度也很常见，每棵树的高度几乎都增加了5px。您可以在 JS 中使用它们的其他功能，并创建树！

您可以使用forJS 循环并创建树，但只需在每次循环后增加树的大小，loop它将为您处理好。您只需要确定您正在编写的内容会创建一棵树。请注意，会生长的树木的大小会增加一个共同点，而叶子的个数会增加一个共同点int。

于 2013-09-24T07:44:52.363 回答
2

如果您想实现与您上传的图像完全相同的效果，我会说 HTML。您必须创建的循环将需要一个基本 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 回答