在文档边界内保留动态生成的元素

无论何时单击元素，我都会创建多个较小的元素副本。这些克隆被发送一个随机的距离和方向。我无法将它们保留在文档边界内。 Here's the Fiddle.在文档边界内保留动态生成的元素

我知道我需要检查每个新元素的位置并将其与文档边界进行比较，以便它自己产生的任何新元素都符合，但是我担心用户调整其浏览器的大小，以及如果用户有一个非常小的窗口，它将如何影响功能......所以我想我也想设置一个可以降级的界限或最小尺寸。

这一切似乎有点资源密集型，我不希望它太重。有没有一种有效的方式来实现我想要的？你可以看到我在小提琴或低于可怜的尝试：

var contW = $(document).width(); 
var contH = $(document).height(); 

var source = $(this).position(); 
var posNeg = Math.random() < 0.5 ? -1 : 1; 
var newTop = Math.floor(Math.random() * (contH/2 + (posNeg * $(this).height()))) * posNeg; 
var posNeg = Math.random() < 0.5 ? -1 : 1; 
var newLeft = Math.floor(Math.random() * (contW/2 + (posNeg * $(this).width()))) * posNeg;

来源

2014-01-14 daveycroqet

我想帮忙，但不能停止点击猫.. – timo

哈哈，只是很高兴我没有让他们喵！ :-) – daveycroqet

演示：http://jsfiddle.net/abhitalks/eadyv/6/

问题（我能想出）：切缘阴性：使克隆图像获得超越边缘

解决方案：删除负边距。尝试使用容器来包含克隆。宽度每次减少一半，因此也必须考虑宽度（以避免从底部和右边缘出来）。

变化我做了测试小提琴：

html, body { width:100%; height: 100%; } 
div#container { 
    position: relative; 
    width: 350px; 
    height: 350px; 
    border: 1px solid gray; 
} 
img.cat { 
    position: absolute; 
    top: 10%; 
    left: 10%; 
    width: 250px; 
    height: 250px; 
    cursor: pointer; 
}

脚注：这个例子小提琴只是测试，以证明遏制问题也许是切缘阴性。您需要将容器从容器更改为文档，然后对其进行调整。

来源

2014-01-14 13:09:04 Abhitalks

您的解决方案可预见地遭受user3008011所做的相反处理。通过消除负利润率，您现在几乎完全支持右下角（而不是左上角）。不过，我觉得这样更接近它需要的地方。 – daveycroqet

不是真的。给我一点时间。 – Abhitalks

好的。全屏检查这个小提琴：** http：//jsfiddle.net/abhitalks/eadyv/8/embedded/result/**（1）我故意使用容器来包含克隆，以便您可以看到实际发生的情况。克隆永远不会离开容器。但是，由于宽度变化，图像可能在容器边界后结束，但不会穿过它。（2）检查'getRandomInt'函数并用正在生成的'newTop'和'newLeft'交叉引用。你会发现它永远不会超过450（容器的大小），并且这些值并不偏向任何一方，而是随机组合。 – Abhitalks

这是你所追求的？

// constrain newTop and newLeft 
    if (newTop < 0){ 
     newTop = 0; 
    } 
    if (newTop > contH){ 
     newTop = contH; 
    } 
    if (newLeft < 0){ 
     newLeft = 0; 
    } 
    if (newLeft > contW){ 
     newLeft = contW; 
    }

http://jsfiddle.net/eadyv/5/

来源

2014-01-14 13:01:20 timo

是的，哇，这样一个简单的解决方案。但现在一切似乎都凝结在西北部的象限中。我认为这是限制顶部和左侧的问题，但我不确定。如果可能的话，我希望他们平等地向各个方向传播。哇... abhitalks更全面的回答，抱歉！ – daveycroqet

在文档边界内保留动态生成的元素

回答

相关问题