2

重複している要素があり、これを防ぎたいです。ここに写真があります：http://grab.by/cB7t

また、これらの要素の CSS は次のとおりです。

.navigationItem {
    background: #808080;
    -webkit-border-radius: 360px;
    padding: 1.0em;
    text-decoration: none;
    color: #fff;
    position: absolute;
    -webkit-box-shadow: 0px 2px 5px #909090;
    font-weight: bold;
    text-shadow: 1px 1px 2px #707070;
    font-size: 1.0em;
}

HTML では次のようになります。

<a href="#" class="navigationItem" id="nav0">play</a>
<a href="#" class="navigationItem" id="nav1">register</a>
<a href="#" class="navigationItem" id="nav2">our blog</a>
<a href="#" class="navigationItem" id="nav4">contact us</a>
<a href="#" class="navigationItem" id="nav5">about us</a>
<a href="#" class="navigationItem" id="nav6">our rules</a>`

ご覧のとおり、HTMLaタグを使用してシンプルなスタイルのリンクとして使用しています。それらの位置が絶対的な理由は、jQuery を使用してそれらを移動しているためです。

function moveAll() {

    for(var i = 0; i < AMOUNT; i++) {
        var random = Math.random() * 500;
        $("#nav" + i).animate({"left": random + i + "px"}, "slow");
        $("#nav" + i).animate({"top": random + i + "px"}, "slow");
    }
}

ただし、移動すると重なり合うことがあり、迷惑です。それらが重ならないようにするにはどうすればよいですか？ご尽力いただきありがとうございます。

4

2 に答える 2

6

削除position:absoluteすると、それらが並んでレンダリングされます。

JSFiddle

しかし、全体のポイントがそれらをランダムに分散させることである場合は、配置された要素を追跡し、それらの位置を計算するときにそれを考慮に入れる必要があります。各リンクの位置を保存し、以前に配置されたリンクに従って次のすべてのリンクの位置を計算する必要があります。ランダムな位置とオーバーラップしないようにしたい場合、他の方法はありません。

最終的な重複しないソリューション

これは、重複しない機能の実例です。リンクが触れないようにしたい場合は、ステートメント条件でとに変更<する必要があります。<=>>=if

関連コード

var positions = [];
$(".navigationItem").each(function(){
    var ctx = $(this);
    var dim = {
        width: ctx.outerWidth(),
        height: ctx.outerHeight()
    };
    var success = false;

    // repeat positioning until free space is found
    while (!success)
    {
        dim.left = parseInt(Math.random() * 300);
        dim.top = parseInt(Math.random() * 300);
        var success = true;

        // check overlapping with all previously positioned links
        $.each(positions, function(){
            if (dim.left < this.left + this.width &&
                dim.left + dim.width > this.left &&
                dim.top < this.top + this.height &&
                dim.top + dim.height > this.top)
            {
                success = false;
            }
        });
    }
    positions.push(dim);
    ctx.animate({
        left: dim.left,
        top: dim.top
    }, "slow");
});
于 2011-06-10T06:46:31.793 に答える
0

位置の値を に変更できますrelative。

私の例を参照してください: http://jsfiddle.net/NmmX6/2/

IDに依存しないようにループを変更しました：

function moveAll() {
    $('.navigationItem').each(function(i,e){
        var rdm = Math.random() * 500;
        $(e).animate({"left":rdm + "px"}, "slow");
        $(e).animate({"top": rdm + "px"}, "slow");
    });
}

私はそれをテストしましたが、実際に重複するケースは1つも見つかりませんでしたが、チェックしてください。

于 2011-06-10T07:43:10.350 に答える