javascript - 防止随机放置的图像出现在某个位置
问题描述
我对 JavaScript 很陌生,但我一直在尝试使用它。我编写了一个(太长的)代码,将图像随机放置在页面上。现在我想确保图像不会出现在页面上的两个菜单后面,但我无法找到一种功能性的方式来做到这一点。
我到目前为止的代码:
(function() {
var w = window.innerWidth;
var h = window.innerHeight;
var urls = ['0', '1', '2', '3', '4'];
var imageUrl1 = urls[Math.round(Math.random() * urls.length)];
while (typeof imageUrl1 === 'undefined') {
var imageUrl1 = urls[Math.round(Math.random() * urls.length)];
}
var imageUrl2 = urls[Math.round(Math.random() * urls.length)];
while (typeof imageUrl2 === 'undefined' | imageUrl2 == imageUrl1) {
var imageUrl2 = urls[Math.round(Math.random() * urls.length)];
}
var imageUrl3 = urls[Math.round(Math.random() * urls.length)];
while (typeof imageUrl3 === 'undefined' | imageUrl3 == imageUrl1 | imageUrl3 == imageUrl2) {
var imageUrl3 = urls[Math.round(Math.random() * urls.length)];
}
function swap() {
/* IMAGE 1 */
var image1 = document.getElementById('image1');
image1.setAttribute('src', 'images/' + imageUrl1 + '.jpg');
imageWidth = window.innerWidth / 2.5 + Math.round(Math.random() * 100);
image1.setAttribute('width', imageWidth);
var availW = w - image1.clientWidth;
image1.onload = function() {
let availH = h - this.height;
let image1Y = Math.round(Math.random() * availH) + 'px';
image1.style.top = image1Y;
}
var image1X = Math.round(Math.random() * availW) + 'px';
image1.style.left = image1X;
/* IMAGE 2 */
var image2 = document.getElementById('image2');
image2.setAttribute('src', 'images/' + imageUrl2 + '.jpg');
imageWidth = window.innerWidth / 3 - Math.round(Math.random() * 250);
while (imageWidth < 200) {
imageWidth = window.innerWidth / 3 + Math.round(Math.random() * 150);
}
image2.setAttribute('width', imageWidth);
var availW = w - image1.clientWidth;
image2.onload = function() {
let availH = h - this.height;
var image2Y = Math.round(Math.random() * availH) + 'px';
image2.style.top = image2Y;
}
var image2X = Math.round(Math.random() * availW) + 'px';
image2.style.left = image2X;
/* IMAGE 3 */
var image3 = document.getElementById('image3');
image3.setAttribute('src', 'images/' + imageUrl3 + '.jpg');
imageWidth = window.innerWidth / 2.5 - Math.round(Math.random() * 350);
while (imageWidth < 80) {
imageWidth = window.innerWidth / 2.5 - Math.round(Math.random() * 150);
}
image3.setAttribute('width', imageWidth);
var availW = w - image1.clientWidth;
image3.onload = function() {
let availH = h - this.height;
var image3Y = Math.round(Math.random() * availH) + 'px';
image3.style.top = image3Y;
}
var image3X = Math.round(Math.random() * availW) + 'px';
image3.style.left = image3X;
}
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
window.addEventListener('load', swap, false);
// If IE event model is used
} else if (document.attachEvent) {
window.attachEvent('onload', swap);
}
})();
<img id="image1" />
<img id="image2" />
<img id="image3" />
如何确保图像不会出现在这些文本块后面?
解决方案
推荐阅读
- python-3.x - 如何隐藏 pyttsx3 中的所有文本输出
- windows - 在磁盘上读取/写入文件时如何限制硬盘 I/O?
- angular - 验证包含带有复选框的输入的表单组,如果未选中任何复选框,则应显示错误消息
- macos - minikube 挂载崩溃:挂载系统调用失败
- laravel - 关系“一次性”替代解决方案 Laravel Voyager
- java - 从 POST 方法中使用 JDBCTemplate 存储对象数组 - Spring Boot
- r - 更快地取消列出、比较和分离一列列表,同时保持大型 data.table 的行号
- python - 使用 ngrok 响应 alexa 自定义技能的问题
- android - Lint 发现致命错误
- javascript - 使用 Firebase 仅为一位用户保存数据