重叠元素 - HTML，CSS和jQuery [英] Overlapping elements - HTML, CSS, and jQuery

问题描述

我有重叠的元素，我想防止这种情况。这是一张图片： http://grab.by/cB7t

I have elements which are overlapping and I would like to prevent this. Here is a picture: http://grab.by/cB7t

此外，这些元素的CSS：

Also, here is the CSS for those elements:

.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中：

And here they are in the 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>`

正如你所看到的，我使用它们作为简单的样式链接使用HTML a 标签。他们的位置是绝对的原因是因为我使用jQuery移动他们：

As you can see, I am using them as simple styled links using the HTML a tag. The reason that their positions are absolute is because I am moving them using 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");
    }
}

当他们移动时，烦人。如何防止它们重叠？感谢您的努力。

When they move, though, they sometimes overlap which is annoying. How can I prevent them from overlapping? Thank you for your efforts.

推荐答案

移除 position：absolute 他们并排。

JSFiddle

但是如果整个点是随机散布它们，那么你必须跟踪定位的元素，并在计算它们的位置时考虑它们。您应该保存每个链接的位置，并根据先前已经放置的链接计算每个下一个链接的位置。

But if the whole point is to scatter them around randomly, then you will have to keep track of positioned elements and take that into account when calculating their position. You should save each link's position and calculate every next link's position according to previous already positioned links. There's simply no other way when you want random positions and non overlapping.

是非重叠功能的工作示例。如果您希望您的链接无法触摸，应将< 更改为< = 和<$在 if 语句条件中，> 到> = / p>

相关代码

This is a working example of non-overlapping functionality. If you'd want your links to not even touch, you should change < to <= and > to >= in the if statement condition.

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");
});

这篇关于重叠元素 - HTML，CSS和jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！