javascript - 数组中的重叠图像

问题描述

我正在尝试制作一个允许您按季节选择壁纸的计划器。目前我正在处理秋天，如果你点击秋天，你可以看到所有的警报都是不同的（显示了我数组中的每个 url）。但是，当这些警报消失时，我只看到一张壁纸。我希望在单击秋天时显示所有壁纸，而不仅仅是一个（因此用户可以看到所有选项）。我希望它们处于网格视图中（类似于 iPhone 上的照片库，但图像有点分散）。我对自己做错了什么感到困惑，因为警报显示所有网址，所以我不确定它们的图像是否相互重叠。我尝试添加边距，但这也不起作用。

这是我的代码：

<html>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>

<body>
  <header>PLANNER</header>
  <div id="menu">


    <button id="fall" onclick="seasonFall()">FALL</button>
    <button id="spring" onclick="seasonSpring()">SPRING</button>
    <button id="summer" onclick="seasonSummer()">SUMMER</button>
    <button id="winter" onclick="seasonWinter()">WINTER</button>
    <button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>


  </div>

  <script>
    var fall = [
      "https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      "https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      "https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    ];

    function seasonFall() {

      for (var i = 0; i < fall.length; i++) {
        var test = document.createElement('div');
        test.id = "test";
        test.innerHTML = document.body.style.backgroundImage = "url('" + fall[i] + "')";
        document.body.style.backgroundPosition = "center center";
        document.body.style.backgroundRepeat = "no-repeat";
        document.body.style.backgroundSize = "300px 300px";
        document.body.style.margin = "30px";
        alert(test.innerHTML);
      }
    }

    function defaultButton() {
      document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
      document.body.style.backgroundPosition = "center center";
      document.body.style.backgroundRepeat = "no-repeat";
      document.body.style.backgroundSize = "cover";
    }
  </script>

  <style>
    /* PLANNER HEADER AT TOP */
    
    header {
      font-family: 'Marvel', sans-serif;
      text-align: center;
      font-size: 100px;
      margin: 0px;
    }
    /* WALLPAPER MENU */
    
    #menu {
      font-family: 'Marvel', sans-serif;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.6);
      font-size: 100px;
      float: left;
      height: 100%;
      margin: 0px;
      grid-area: menu;
    }
    /* SEASON BUTTONS */
    
    button {
      font-size: 16px;
      text-align: center;
      font-family: 'Marvel', sans-serif;
      font-weight: bold;
      height: 25px;
      display: block;
      margin: 20px;
      width: 160px;
    }
  </style>
</body>

</html>

我发现了类似的问题，但他们使用了其他语言：

从 Url (Java)加载网格视图中的图像
从数组中获取图像 url (Php)

标签： javascripthtmlarraysbutton

解决方案

问题是您在方法的每次迭代中都覆盖了文档正文的背景图像seasonFall。

请尝试这样的事情：

 
<html>

<head>
  <link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>

<body>
  <header>PLANNER</header>
  <div id="menu">


    <button id="fall" onclick="seasonFall()">FALL</button>
    <button id="spring" onclick="seasonSpring()">SPRING</button>
    <button id="summer" onclick="seasonSummer()">SUMMER</button>
    <button id="winter" onclick="seasonWinter()">WINTER</button>
    <button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>


  </div>

  <div id="wrapper">

  </div>

  <script>
    var fall = [
      "https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      "https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      "https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
    ];

    function seasonFall() {

      for (var i = 0; i < fall.length; i++) {
        // Please, excuse the code, is just for give you the idea
        // Ideally you must use CSS to set as much of these properties as 
        // you can once you have a clear idea of how to organize your grid
        var test = document.createElement('div');
        test.id = "test" + i;
        test.style.backgroundImage = "url('" + fall[i] + "')";
        test.style.backgroundPosition = "center center";
        test.style.backgroundRepeat = "no-repeat";
        test.style.backgroundSize = "300px 300px";
        test.style.margin = "30px";
        test.style.width = "300px";
        test.style.height = "300px";
        wrapper.appendChild(test);
      }
    }

    function defaultButton() {
      document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
      document.body.style.backgroundPosition = "center center";
      document.body.style.backgroundRepeat = "no-repeat";
      document.body.style.backgroundSize = "cover";
    }
  </script>

  <style>
    /* PLANNER HEADER AT TOP */
    
    header {
      font-family: 'Marvel', sans-serif;
      text-align: center;
      font-size: 100px;
      margin: 0px;
    }
    /* WALLPAPER MENU */
    
    #menu {
      font-family: 'Marvel', sans-serif;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.6);
      font-size: 100px;
      float: left;
      height: 100%;
      margin: 0px;
      grid-area: menu;
    }
    /* SEASON BUTTONS */
    
    button {
      font-size: 16px;
      text-align: center;
      font-family: 'Marvel', sans-serif;
      font-weight: bold;
      height: 25px;
      display: block;
      margin: 20px;
      width: 160px;
    }

    #wrapper {
      margin-left: 200px;
    }
  </style>
</body>

</html>

这个想法是创建一系列 div 元素并设置它们的背景属性。

您可以使用您认为合适的列数和行数将这些 div 组织在一个网格中，例如，只需在seasonFall方法中包含更多循环并调整它们的边距和位置。

javascript - 数组中的重叠图像 - Javascript

问题描述

解决方案

推荐阅读