我正在使用此代码使图像和文本在屏幕上移动。我的问题是,有时图像和文本会彼此落在地上并堆叠在一起,我该如何使其无法落在彼此上?
$(document).ready(function() {
animateDiv('.a');
animateDiv('.b');
animateDiv('.c');
animateDiv('.d');
animateDiv('.e');
animateDiv('.f');
animateDiv('.g');
animateDiv('.h');
animateDiv('.i');
});
function makeNewPosition() {
var h = $(window).height() - 60;
var w = $(window).width() - 60;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv(myclass) {
var newq = makeNewPosition();
$(myclass).animate({
top: newq[0],
left: newq[1]
}, 2000, function() {
animateDiv(myclass);
});
};
div.a {
width: 50px;
height: 50px;
position: fixed;
color: Navy;
}
div.b {
width: 50px;
height: 50px;
position: fixed;
color: red;
}
div.c {
width: 50px;
height: 50px;
position: fixed;
color: Fuchsia;
}
div.d {
width: 50px;
height: 50px;
position: fixed;
color: SpringGreen;
}
div.e {
position: fixed;
}
div.f {
position: fixed;
}
div.g {
position: fixed;
}
div.h {
position: fixed;
}
div.i {
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>MOCKO</div>
<div class='b'>MOCKO</div>
<div class='c'>MOCKO</div>
<div class='d'>MOCKO</div>
<div class='e'><img src="image/image1.png"></div>
<div class='f'><img src="image/image2.png"></div>
<div class='g'><img src="image/image3.png"></div>
<div class='h'><img src="image/image4.png"></div>
<div class='i'><img src="image/image5.png"></div>
在此先感谢您的帮助!我叫Lukas,我不太擅长编码。
答案 0 :(得分:1)
因此,您实际上是在屏幕上随机放置固定元素,这就是为什么它们偶尔重叠的原因。
有几种方法可以防止这种情况,但这仅取决于您的最终目标。
如果您确实想要没有重叠的随机放置方法,则必须在makeNewPosition中对所有现有位置进行检查,以确定它们的坐标是否重叠,如果是,则重新生成坐标。您需要确定新放置位置和旧放置位置的边缘,然后进行比较。
我个人认为这将是一种脆弱且过于复杂的工作方式。我鼓励您查看随机生成以外的其他可能解决方案,也许是不同的布局。
@hungerstar也有很好的评论。这本质上是冲突检测。做好这项工作并回答您的特定问题可能会涉及到很多人。
以下是一个有用的SO链接,它解释了一种基本方法:jQuery/JavaScript collision detection
这是jsfiddle
上的一个有效示例:https://jsfiddle.net/ryanoc/TG2M7/
如果您愿意,我可以介绍一个特定的用例。不知道要发布什么,因为我不确定您的最终目标是什么。