覆盖图像与JS, HTML, CSS

Overlaying image with JS, HTML, CSS

本文关键字：HTML CSS JS 覆盖图 图像 覆盖      更新时间：2023-09-26

我想为我的网站创建一个装扮功能，这非常类似于一个典型的装扮游戏。我已经戴上了眼镜，但最接近的答案是这个:在HTML

中覆盖图像

我试着在我的本地服务器上用我自己的自定义实现它，它工作了!然而，我试图添加一些东西(如渐变过渡)，它似乎不起作用(主要功能仍然有效)。更糟糕的是，当我把它上传到JSFiddle时，原来的功能甚至不能工作(更不用说渐变过渡了)。

我的代码可以在这里找到。我尝试过解决它的方法，但我的JS/HTML编码技能是有限的。基本上，我正在尝试添加一个渐变过渡到变化(而不是突然的变化)。至于为什么相同的代码在我的本地计算机上工作，而不是在JSFiddle上，我不知道。

最后，是否有一种方法来设置一个默认的选择，而不是加载一个"基础"?目前，正在加载一个"基础"图像，只有在选择时，才会出现额外的图像层。我可以在不用户选择任何内容的情况下预加载列表中的第一个选择吗?

谢谢，非常感谢你的帮助:)

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Funny Dress-up Games</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript"><!--
    function createCharac(userChoice) {
      var links = [
        "http://dancer2dancer.sg/test/ppl-red.jpg",
        "http://dancer2dancer.sg/test/ppl-orange.jpg",
        "http://dancer2dancer.sg/test/ppl-pink.jpg"
      ];
      document.getElementById('charac').src = links[userChoice];
    }
    function createPants(userChoice) {
      var links = [
        "http://dancer2dancer.sg/test/pants-blue.png",
        "http://dancer2dancer.sg/test/pants-green.png",
        "http://dancer2dancer.sg/test/pants-yellow.png"
      ];
       document.getElementById('pants').src = links[userChoice];
     }
     function createShoe(userChoice) {
      var links = [
        "http://dancer2dancer.sg/test/shoe-blue.png",
        "http://dancer2dancer.sg/test/shoe-red.png",
        "http://dancer2dancer.sg/test/shoe-yellow.png"
      ];
      document.getElementById('shoe').src = links[userChoice];
    }
  //--></script>
  <style type="text/css">
  <!--
  .overlay {
    position: absolute;
  }
  .overlay-container {
    position: relative;
  }
  #char {
    z-index: 10;
    padding:0px 0px 0px 0px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
  }
  #pants {
    z-index: 20;
    padding:0px 0px 0px 0px;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
  }
  #shoe {
    z-index: 15;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
  }
  -->
  </style>
</head>
<body style="margin:0;padding:8px;" onload="initImages();">
    <p>What character?
        <select name="choice1" id="choice1" onchange="createCharac(this.value)">
            <option value="0">Red</option>
            <option value="1">Orange</option>
            <option value="2">Pink</option>
        </select>
    </p>
    <p>What pants?
        <select name="choice2" id="choice2" onchange="createPants(this.value)">
            <option value="0">Blue</option>
            <option value="1">Green</option>
            <option value="2">Yellow</option>
        </select>
    </p>
    <p>What shoe?
        <select name="choice3" id="choice3" onchange="createShoe(this.value)">
            <option value="0">Blue</option>
            <option value="1">Red</option>
            <option value="2">Yellow</option>
        </select>
    </p>
    <div class="overlay-container">
        <img class="overlay" src="http://dancer2dancer.sg/test/ppl-red.jpg" />
        <img class="overlay" id="charac" />
        <img class="overlay" id="pants" />
        <img class="overlay" id="shoe" />
    </div>
</body>
</html>

function initImages(params) {
  if(!params) {
    var params = {"character":0, "pants":0, "shoe":0}; // Default set
  }
  createCharac(params.character);
  document.getElementById("choice1").value = params.character.toString();
  createPants(params.pants);
  document.getElementById("choice2").value = params.pants.toString();
  createShoe(params.shoe);
  document.getElementById("choice3").value = params.shoe.toString();
}

然后你可以这样使用你的函数:

initImages({"character":0, "pants":2, "shoe":1});

或简单地:initImages()加载默认设置

要实现淡入/淡出效果，您可能需要考虑使用支持该效果的JavaScript库。例如，查看jQuery的淡入/淡出效果(http://api.jquery.com/fadein/)。我要做的是:

  1. 为你想要改变的body的每个部分创建一个DIV(目前，它们是图像)。
    2. 将默认图像放入div中。
  2. 修改您的"创建"功能，以淡出DIVs中的现有图像，然后用新图像替换img src，或者创建一个新的img对象并使其淡出(为了并行淡出和淡出)。
相关文章：