在浏览一些电子商务网站的时候，选择一件产品的时候，我们经常会看到点击衣服的颜色，同一件衣服的颜色就会切换，让我们觉得真是比较有意思，这样做的效果给用户的体验比较好，今天就给大家分享一下这种效果的实现原理

是一个轻量级的产品颜色解决方案，用户可以快速预览产品以选择不同的颜色。该插件每个产品只使用两个图像来创建效果，它是建立在强大的和流行的Javascript框架和，为您提供一个简单的设置。该插件兼容所有主要的浏览器包括IE7 +（使用PNG修复，可以运行在IE6当中）。

根据你的浏览习惯为你推荐

废话少多，先来个演示（点击下面的choose color颜色会发生变化）

• 说明

  1. 下载，解压缩，将文件上传到你的服务器。放在head头部，这里就不多说了

  2. 1 
              2 3 
              4 &lgt;script type="text/javascript" src="js/raphael-min.js">5 
              6 7 &

     一种颜色：

     现在准备图像，为了得到一张基本的颜色产品，我们将我们需要两个图像、 产品和透明的合影。接下来将创建蒙版。

     创建蒙版，用钢笔工具在图像编辑器跟踪需要彩色图像的部分。一旦追踪了整个图像，选择形状，并删除所选区域的照片。这个图像保存为一个透明的PNG图片

     下面是我使用的两个图像：（原图和png透明）

  3.  

     两种或更多种颜色

     为了在一个产品里显示两张不同的颜色，这里控制LOGO的颜色和背景的颜色作为搭配，详细的例子看最下面的DEMO

  4. 

      

     

  6. 现在开始编写我们的html部分，每个产品都被定义一个名字为product的类Div,在该产品的div，将有一个product-img的div，其中包含默认的产品形象和透明的图像，然后，你将有一个swatch div 包含所有你想要的可供选择颜色，并且定义了锚的链接。如下面的代码
  7. 1 
              
                2     
               
                 3         
                 4         
                 5     
               
      6      7     
               
     Product Title
      8     
               
     Product Description
      9     
               
     Choose a Color:
     10     
               
                11         
                Green12         
                Yellow13         
                Orange14         
                Blue15         
                Purple16         
                Red17     
               
     18 
              

     rel属性将包含您想要的颜色的RGB值  href 属性 定位到 透明图像的ID, 标题属性提供了工具提示，让用户知道什么颜色。

  8.  

     1 Color Name

     两种或更多种颜色

     如果你需要两种颜色，你需要两种不同的swatch divs来进行分区颜色，您还需要另一个透明图像内的产品IMG的 div，下面的代码跟上面的差不多，只不过是多了一种颜色选择

  9. 1 
              
                2     
               
                 3         
                 4         
                 5         
                
      6     
               
      7      8     
               
     Product Title
      9     
               
     Product Description
     10     
               
     Choose a Color:
     11     
               
                12         
                Green13         
                Yellow14         
                Orange15         
                Blue16         
                Purple17         
                Red18     
               
     19     
               
                20         
                Green<21         
                Yellow<22         
                Orange<23         
                Blue<24         
                Purple<25         
                Red26     
               
     27 
              

     注意到另一种颜色的描点被定义了不同的ID

     现在我们查看SVG文件。在Firefox中打开文件，查看源文件。如果向下滚动，你应该看到一些代码，看起来像这样：

  10. 1 
               

      复制里面所有的路径信息的d属性的。作用是告诉什么形状的覆盖层。

  11. 1 
               
      

      4.在CSS当中为 product div.添加相对定位

  12. .product {position:relative;}

      5 最后, 在文档加载完后，调用 productColorizer 插件调用任何您想要的选项

  13. 1 

       演示（点击下面的choose color颜色会变化）

      选项

      名称	描述
      transparency	颜色叠加图像的透明度。数在0-1之间;默认值：0.55
      secondaryTransparency	二次色叠加在图像的透明度。数在0-1之间;默认值：0.55
      swatchTransparency	透明度的渐变颜色样本数在0-1之间;默认值：0.75
      swatchClass	一类的div包含的样本。如果你改变它的默认，确保相应修改CSS 类名的默认值：swatch'

       

  14.  本文链接：

  17.