Question

IDEA

包含几个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或者只是top和left），使图像边缘和页面边缘之间的边距不会小于20像素。

带有图像的容器位于屏幕外，然后在加载和计算图像后，容器变得不可见并且适合屏幕。在Firefox中，它工作正常，警报显示正确的计算结果，但在Chrome和Safari中，图像大小被视为0，最终的计算错误，使得一些图像位于页面边缘后面。

我想做的另一件事是将js代码设为通用代码，因此不需要提及每个#img和#mimg元素。

http://thelocalgenius.com/patterns/brickwork-classics/

相同的代码在JSfiddle中运行良好： http://jsfiddle.net/n3q92/1/虽然几乎相同的代码在我的页面上不起作用，但那些无法包含在JSfiddle中的部分似乎是原因 - 我试图将它们全部禁用，但这并不影响页面的工作方式。

更新：小提琴适用于Chrome，但不适用于Safari。

更新2：我发现了一个更有趣的事情 - 在Firefox中，如果页面加载没有缓存，脚本无法像Chrome和Safari一样获取图像的宽度和高度。我不明白为什么因为它们位于带有display:block;选项的div中而应该加载的图像只是位于屏幕边缘上方1000px处。有人有什么想法吗？

Answer 1

解决方案是使用$(window).load()代替$(document).ready()。有趣的是，相同的JavaScript代码在Chrome中的JSfiddle上运行。

JQuery图像大小计算在Chrome / Safari中不起作用

1 个答案: