【发布时间】：2013-12-16 12:37:27
【问题描述】：
想法
一个包含一些 div 元素的页面，有些是可见的，有些必须保持不可见，直到单击特定的 span 元素。其中一个不可见元素是包含多个带有弹出文本的图像的容器，这些图像应随机放置在页面上，但在页面的每个边缘都有20px 边距（页面设置为overflow:hidden;）。
HTML（包括 jQuery 1.8.3、jQuery UI 1.10.1 和 jQuery UI touch-punch）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div class="pattern" style="background-image: url('m.png');"></div>
<div class="shadow pat-main-block">
<span class="mood-board">Show container</span>
</div>
<!-- Container div -->
<div id="mood-board">
<span class="hide-mood shadow">Hide container</span>
<div id="img1" class="drag mood-img">
<img id="mimg1" class="shadow" src="mood/brick-mood-1.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img2" class="drag mood-img">
<img id="mimg2" class="shadow" src="mood/brick-mood-4.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img3" class="drag mood-img">
<img id="mimg3" class="shadow" src="mood/brick-mood-3.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img4" class="drag mood-img">
<img id="mimg4" class="shadow" src="mood/brick-mood-2.png">
<span class="mood-name shadow">text</span>
</div>
<div id="img5" class="drag mood-img">
<img id="mimg5" class="shadow" src="mood/brick-draw-4.png">
<span class="mood-name shadow">text</span>
</div>
</div>
<!-- End of the container div -->
</body>
这段代码被简化了——我删除了不影响大小写的元素，只在容器 div 中留下了 5 个元素（实际上有 13 个元素）。我想制作一种模板，以便它可以用于不同的图像和不同数量的图像（元素）。
CSS：
html, body {
width:100vw;
height:100vh;
margin:0;
padding:0;
overflow:hidden;
}
.pattern {
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
}
.pat-main-block {
position:fixed;
top:100px;
left: 100px;
background: #fff;
padding: 40px;
}
#mood-board {
position: absolute;
width:100%;
height:100%;
margin-top:-1000px;
left:0;
}
.mood-img {position:absolute;}
.mood-img:hover .mood-name {opacity:1;}
.mood-name {
position:absolute;
opacity:0;
background:#fff;
bottom:15px;
right:15px;
}
.hide-mood {
position:absolute;
top:40px;
left:40px;
padding:9px;
background:#1900DC;
color:#fff;
z-index:99;
cursor:pointer;
}
JS 1：
$(function(){
$(".mood-board").click(function(){
$("#mood-board").css("display", "block");
});
});
JS 2：
$(document).ready(function () {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
$("#img1").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
alert ( $('#mimg1').outerHeight() );
$("#img1").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img2").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg2').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg2').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img2").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img3").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg3').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg3').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img3").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img4").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg4').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg4').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img4").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#img5").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg5').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg5').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$("#img5").css({
"margin-top": randomtop,
"margin-left": randomleft,
"z-index": randomzindex
});
});
$("#mood-board").css({
"display": "none",
"margin-top": "0"
});
});
我尝试使用的方法是计算页面的宽度和高度，图像的宽度和高度，然后计算随机定位的最小和最大范围（margin-top 和 margin-left 或只是顶部和左侧） ，以便图像边缘和页面边缘之间的边距不会小于 20 像素。
带有图像的容器位于屏幕外，然后在加载和计算图像后，容器将变为不可见并放置以适应屏幕。在 Firefox 中它工作正常，警报显示正确的计算结果，但在 Chrome 和 Safari 中，图像大小被视为 0，最终计算错误，导致一些图像超出页面边缘。
我想做的另一件事是使 js-code 通用，因此无需提及每个 #img 和 #mimg 元素。
http://thelocalgenius.com/patterns/brickwork-classics/
相同的代码在 JSfiddle 中运行良好：http://jsfiddle.net/n3q92/1/ 虽然几乎相同的代码在我的页面上不起作用，并且那些无法包含到 JSfiddle 中的部分也没有似乎是原因 - 我尝试将它们全部禁用，但它并没有影响页面的工作方式。
更新： Fiddle 在 Chrome 中有效，但在 Safari 中无效。
更新 2： 我发现了一件更有趣的事情——在 Firefox 中，如果页面加载时没有缓存，脚本无法像在 Chrome 和 Safari 中那样获取图像的宽度和高度。我不明白为什么，因为图像应该加载，因为它们位于带有display:block; 选项的 div 中，仅位于屏幕边缘上方 1000px 处。有人有什么想法吗？
【问题讨论】：
标签： javascript jquery html css random