Question

我目前正在研究指甲油网站，对Jquery来说很新。我需要实现一个“试一试”页面，人们可以选择他们喜欢的颜色，图像的指甲会变成特定的颜色。

基本上是这样的：http://chinaglaze.com/Try-On/index.html

我已尝试从此链接中提取html，脚本等，以尝试弄清楚它是如何完成的。但是，我完全不知道如何实现这一点并让它在我的网站上运行。

我一直在做很多研究而找不到答案。

好的，所以这只手是一个带有.png背景图像的div，通过css实现（指甲是透明的）。手旁边的按钮是普通图像。基本上当有人选择特定的按钮图像时，它必须作为背景图像拉到div并重复。因此显示为指甲颜色。

我不确定这是否有意义？

Answer 1

以下是有关如何在点击时设置另一个项目的颜色的示例代码段。（由于您没有提供任何HTML，我使用了样本标记）

在您提供的链接中，他们可能正在使用图片。

$(".item").click(function() {

  $("#change").css("background",$(this).css("background"));
});

#change {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
}
.item {
  height: 100px;
  width: 100px;
  display: inline block;
  float: left
}
#green {
  background: green;
}
#red {
  background: red;
}
#blue {
  background: blue;
}
#yellow {
  background: yellow
}
#black {
  background: black
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change">
  Select a color
</div>

<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>

Answer 2

这是解决方案，使用上面回答的代码创建了一个工作[JSFiddle] [1]，几乎没有变化

＆＃13;

$(".item").click(function() {
  $(".screen").css("background",$(this).css("background"));
});

＆＃13;

.screen {
    
  border: 1px solid #ccc;
}
#change
{
   background:url("http://chinaglaze.com/images/tryon/hand_1.png") 0px 0px no-repeat;
     width: 300px;
    height: 516px;
}
.item {
  height: 100px;
  width: 100px;
  display: inline block;
  float: left;
  
}
#green {
  background: green;
}
#red {
  background: red;
}
#blue {
  background: blue;
}
#yellow {
  background: yellow
}
#black {
  background: black
}

＆＃13;

   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
  <div id="change">
    Select a color
  </div>
</div>


<div class="item" id="green">
</div>
<div class="item" id="red">
</div>
<div class="item" id="blue">
</div>
<div class="item" id="yellow">
</div>
<div class="item" id="black">
</div>

＆＃13;

单击时将一个元素的背景图像更改为另一个元素的相同图像

2 个答案: