Question

我试图为我的网站创建一个装扮功能，这非常类似于典型的装扮游戏..我已经Goggleed但最接近的答案就是这个：{{3} }

我尝试在我的本地服务器上使用自己的自定义项实现它并且它有效！但是，我尝试添加一些东西（比如淡入淡出过渡）并且它似乎不起作用（主要功能仍然有效）。更糟糕的是，当我将它上传到JSFiddle时，原始功能甚至不起作用（更不用说淡入淡出过渡）。

我的代码可以找到 Overlaying image in HTML 。我已经尝试过解决方法，但我的JS / HTML编码技巧有限。基本上我试图为变化添加淡入过渡（而不是突然变化）。至于为什么相同的代码在我的本地计算机上工作但在JSFiddle上没有，我不知道。

最后，有没有办法设置默认选择，而不是加载＆＃34; base＆＃34;？目前，＆＃34;基地＆＃34;正在加载图像，并且仅在选择时，才会显示其他图像层。我可以预先加载列表中的第一个选项而无需用户选择任何内容吗？

感谢并非常感谢任何帮助：）

CODE：

<!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>

Answer 1

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()加载默认设置。

Answer 2

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

为您想要更改的身体的每个部分创建一个DIV（目前，它们是图像）。
将默认图像放入DIV。
修改你的“创建”功能以淡出DIV中的现有图像，然后用新图像替换img src，或者创建一个新的img对象并让它淡入（为了淡出和淡入平行）。

用JS，HTML，CSS覆盖图像

2 个答案: