Question

我想制作一些这样的东西，你可以选择前面和背景，并让它一起显示。：https://www.control4.com/solutions/products/switches

我知道有些事情可能会丢失，我试图环顾四周。我很感激任何帮助。非常感谢。

<div class="foreground">
  <h4>Button Colour</h4>
    <select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
        <option value="switch/button/white.png" selected>White</option>
        <option value="switch/button/snowwhite.png">Snow White</option>
        <option value="switch/button/biscuit.png">Biscuit</option>
        <option value="switch/button/lightalmond.png">Light Almond</option>
        <option value="switch/button/brown.png">Brown</option>
        <option value="switch/button/black.png">Black</option>
        <option value="switch/button/midnightblack.png">Midnight Black</option>
        <option value="switch/button/aluminum.png">Aluminum</option>
    </select>
</div>
<br>
<div class="background">
    <h4>Faceplate Colour</h4>
    <select onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);">
        <option value="switch/faceplate/white.png" selected>White</option>
        <option value="switch/faceplate/snowwhite.png">Snow White</option>
        <option value="switch/faceplate/biscuit.png">Biscuit</option>
        <option value="switch/faceplate/lightalmond.png">Light Almond</option>
        <option value="switch/faceplate/brown.png">Brown</option>
        <option value="switch/faceplate/black.png">Black</option>
        <option value="switch/faceplate/midnightblack.png">Midnight Black</option>
        <option value="switch/faceplate/aluminum.png">Aluminum</option>
        <option value="switch/faceplate/satinnickle.png">Satin Nickel</option>
        <option value="switch/faceplate/bronze.png">Venetian Bronze</option>
        <option value="switch/faceplate/stainlesssteel.png">Stainless Steel</option>
    </select>
</div>

  <!-- style -->
  <style type="text/css">
    .background { 
       position:absolute;
      z-index:1;
      left:125px;
      top:125px;
      float: right;
    }

    .foreground {   
      position:absolute;
      z-index:auto;
      float: left;
    } 

   #switch{
    position: relative;
   }
  </style>

Answer 1

如果您注意到，这些图像是png且尺寸相同，且开关和背景位置完美。所以在另一个内显示一个div将与下面的代码段完全重叠

使用jQuery的东西，应该让你去....

＆＃13;

$(document).ready(function() {
  $('#switchSel').change(function() {

    var switchPic = $('.switch');
    switchPic.removeClass();
    switchPic.addClass('switch ' + $(this).val());
  })
})

＆＃13;

.back {
  background: url(https://www.control4.com/files/large/805347005e9b7ee87d4da29d56c9fa44.png);
  height: 575px;
  width: 361px;
  display: inline-block;
}
.brown {
  background: url(https://www.control4.com/files/large/61ba4092e170c22c3806a930ca7924f5.png);
  height: 575px;
  width: 361px;
}
.black {
  background: url(https://www.control4.com/files/large/251e9a5ac63b46f4acf8b09dbc5e17b7.png);
  height: 575px;
  width: 361px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="switchSel">
    <option value="black">black</option>
    <option value="brown">brown</option>
  </select>
</div>
<div class="switch black">
  <div class="back">
  </div>
</div>

＆＃13;

图像叠加并更改下拉选择？

1 个答案: