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

Change background image of one element to the same image of the other element on click

本文关键字：图像 元素 另一个 背景 一个 单击      更新时间：2023-09-26

我目前正在开发一个指甲油网站，对Jquery很陌生。 我需要实现一个"试穿"页面，人们可以选择他们喜欢的颜色，图像的指甲会更改为该特定颜色。

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

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

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

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

我不确定这是否有意义？

下面是如何在单击时在另一个项目上设置一个项目的颜色的示例片段。（由于您没有提供任何 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>

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

$(".item").click(function() {
  $(".screen").css("background",$(this).css("background"));
});
.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
}
   
<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>

相关文章：