iro实现模特上衣裤子鞋颜色换色搭配效果代码-html代码-BFW代码库

iro实现模特上衣裤子鞋颜色换色搭配效果代码

代码语言：html

所属分类：其他

代码描述：iro实现模特上衣裤子鞋颜色换色搭配效果代码，可选取不同颜色观看效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
#container {
  display: flex;
  flex-flow: row nowrap;
  margin: 24px auto;
  max-width: 640px;
}

#model {
  height: 512px;
  position: relative;
  width: 256px;
}
#model #pantsImg,
#model #shirtImg,
#model #shoesImg {
  left: 0;
  position: absolute;
  top: 0;
}
#model #pantsImg {
  left: 81px;
  top: 233px;
}
#model #shirtImg {
  left: 67px;
  top: 95px;
}
#model #shoesImg {
  left: 84px;
  top: 450px;
}

#sliderPicker {
  border: solid 2px #999;
  border-radius: 8px;
  font: normal 14px/1.2 sans-serif;
  height: auto;
  margin-top: 80px;
  max-height: 250px;
  padding: 24px;
}
#sliderPicker p {
  font-size: 18px;
  font-weight: bold;
  line-height: 2;
}
#sliderPicker #colorPicker {
  padding: 0 24px;
}
#sliderPicker ul[id=colorTarget] {
  display: flex;
  flex-flow: row nowrap;
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
#sliderPicker ul[id=colorTarget] li {
  margin-right: 1em;
}
</style>


  
</head>

<body >
  <div id="container">
  <div id="sliderPicker">
    <p>
      Choose a color for:
    </p>
    <ul id="colorTarget">
      <li><label class="label" for="shirt">
          <input type="radio" id="shirt" name="colors" value="shirt" checked />Shirt
        </label></li>
      <li><label class="label" for="pants">
          <input type="radio" id="pants" name="colors" value="pants" />Pants
        </label></li>
      <li><label class="label" for="shoes">
          <input type="radio" id="shoes" name="colors" value="shoes" />Shoes
        </label></li>
    </ul>
    <div id="picker"></div>
  </div>

  <div id="model">
    <img id="bodyImg" src="//repo.bfw.wiki/bfwrepo/images/speaker/body.png" alt="" />
    <img id="shoesImg" src="//repo.bfw.wiki/bfwrepo/images/speaker/shoes_1.png" alt="shoes" />
    <img id="pantsImg" src="//repo.bfw.wiki/bfwrepo/images/speaker/pants_1.png&.........完整代码请登录后点击上方下载按钮下载查看