當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

使用jquery打造一个动态的预览产品颜色效果

發(fā)布時(shí)間：2023/12/19 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了使用jquery打造一个动态的预览产品颜色效果小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在瀏覽一些電子商務(wù)網(wǎng)站的時(shí)候，選擇一件產(chǎn)品的時(shí)候，我們經(jīng)常會(huì)看到點(diǎn)擊衣服的顏色，同一件衣服的顏色就會(huì)切換，讓我們覺(jué)得真是比較有意思，這樣做的效果給用戶的體驗(yàn)比較好，今天就給大家分享一下這種效果的實(shí)現(xiàn)原理

productColorizer是一個(gè)輕量級(jí)的產(chǎn)品顏色解決方案，用戶可以快速預(yù)覽產(chǎn)品以選擇不同的顏色。該插件每個(gè)產(chǎn)品只使用兩個(gè)圖像來(lái)創(chuàng)建效果，它是建立在強(qiáng)大的和流行的Javascript框架和jQuery，為您提供一個(gè)簡(jiǎn)單的設(shè)置。該插件兼容所有主要的瀏覽器包括IE7 +（使用PNG修復(fù)，可以運(yùn)行在IE6當(dāng)中）。

根據(jù)你的瀏覽習(xí)慣為你推薦

前端開(kāi)發(fā)推薦-創(chuàng)建一個(gè)精美的jquery圖片庫(kù)效果
前沿設(shè)計(jì)推薦-讓你的404頁(yè)面飛起來(lái)-使用jquery創(chuàng)建一個(gè)會(huì)飛的404頁(yè)面
分享5個(gè)實(shí)用的Javascript動(dòng)態(tài)更新圖標(biāo)插件
前沿設(shè)計(jì)推薦-使用jquery打造動(dòng)感的浮動(dòng)web界面
jquery視差推薦：nikebetterworld視差平滑滾動(dòng)效果

廢話少多，先來(lái)個(gè)演示（點(diǎn)擊下面的choose color顏色會(huì)發(fā)生變化）

目錄結(jié)構(gòu)

說(shuō)明
演示
選項(xiàng)
說(shuō)明
下載，解壓縮，將文件上傳到你的服務(wù)器。放在head頭部，這里就不多說(shuō)了
1  2 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 3  4 &lgt;script type="text/javascript" src="js/raphael-min.js"></script> 5  6 <script type="text/javascript" src="js/jquery.productColorizer.pack.js"></script> 7 &
一種顏色：

現(xiàn)在準(zhǔn)備圖像，為了得到一張基本的顏色產(chǎn)品，我們將我們需要兩個(gè)圖像、產(chǎn)品和透明的合影。接下來(lái)將創(chuàng)建蒙版。

創(chuàng)建蒙版，用鋼筆工具在圖像編輯器跟蹤需要彩色圖像的部分。一旦追蹤了整個(gè)圖像，選擇形狀，并刪除所選區(qū)域的照片。這個(gè)圖像保存為一個(gè)透明的PNG圖片

下面是我使用的兩個(gè)圖像：（原圖和png透明）
?

兩種或更多種顏色
為了在一個(gè)產(chǎn)品里顯示兩張不同的顏色，這里控制LOGO的顏色和背景的顏色作為搭配，詳細(xì)的例子看最下面的DEMO
?
現(xiàn)在開(kāi)始編寫(xiě)我們的html部分，每個(gè)產(chǎn)品都被定義一個(gè)名字為product的類(lèi)Div,在該產(chǎn)品的div，將有一個(gè)product-img的div，其中包含默認(rèn)的產(chǎn)品形象和透明的圖像，然后，你將有一個(gè)swatch div 包含所有你想要的可供選擇顏色，并且定義了錨的鏈接。如下面的代碼
1 <div class="product"> 2 <div class="product-img"> 3 <img src="images/default.jpg" /> 4 <img id="mask" class="mask" src="images/mask.png" /> 5 </div> 6 7 <h3>Product Title</h3> 8 <p>Product Description</p> 9 <h4>Choose a Color:</h4> 10 <div class="swatch"> 11 <a rel="32,223,95" href="#mask" title="Green">Green</a> 12 <a rel="255,211,8" href="#mask" title="Yellow">Yellow</a> 13 <a rel="255,101,8" href="#mask" title="Orange">Orange</a> 14 <a rel="16,200,255" href="#mask" title="Blue">Blue</a> 15 <a rel="142,8,255" href="#mask" title="Purple">Purple</a> 16 <a rel="245,25,45" href="#mask" title="Red">Red</a> 17 </div> 18 </div>
rel屬性將包含您想要的顏色的RGB值? href 屬性定位到透明圖像的ID, 標(biāo)題屬性提供了工具提示，讓用戶知道什么顏色。
?
1 <a rel="red,green,blue" href="mask-id" title="Color Name">Color Name</a>
兩種或更多種顏色

如果你需要兩種顏色，你需要兩種不同的swatch divs來(lái)進(jìn)行分區(qū)顏色，您還需要另一個(gè)透明圖像內(nèi)的產(chǎn)品IMG的?div，下面的代碼跟上面的差不多，只不過(guò)是多了一種顏色選擇
1 <div class="product"> 2 <div class="product-img"> 3 <img src="images/default.jpg" /> 4 <img id="mask" class="mask" src="images/mask.png" /> 5 <div id="overlay" class="secondary"></div> 6 </div> 7 8 <h3>Product Title</h3> 9 <p>Product Description</p> 10 <h4>Choose a Color:</h4> 11 <div class="swatch"> 12 <a rel="32,223,95" href="#mask" title="Green">Green</a> 13 <a rel="255,211,8" href="#mask" title="Yellow">Yellow</a> 14 <a rel="255,101,8" href="#mask" title="Orange">Orange</a> 15 <a rel="16,200,255" href="#mask" title="Blue">Blue</a> 16 <a rel="142,8,255" href="#mask" title="Purple">Purple</a> 17 <a rel="245,25,45" href="#mask" title="Red">Red</a> 18 </div> 19 <div class="swatch"> 20 <a rel="32,223,95" href="#overlay" title="Green">Green<</a> 21 <a rel="255,211,8" href="#overlay" title="Yellow">Yellow<</a> 22 <a rel="255,101,8" href="#overlay" title="Orange">Orange<</a> 23 <a rel="16,200,255" href="#overlay" title="Blue">Blue<</a> 24 <a rel="142,8,255" href="#overlay" title="Purple">Purple<</a> 25 <a rel="245,25,45" href="#overlay" title="Red">Red</a> 26 </div> 27 </div>
注意到另一種顏色的描點(diǎn)被定義了不同的ID

現(xiàn)在我們查看SVG文件。在Firefox中打開(kāi)文件，查看源文件。如果向下滾動(dòng)，你應(yīng)該看到一些代碼，看起來(lái)像這樣：
1 <path 2 style="fill:#000000" 3 d="PATH INFORMATION" 4 id="path3065" 5 inkscape:connector-curvature="0" />
復(fù)制里面所有的路徑信息的d屬性的。作用是告訴什么形狀的覆蓋層。
1 <div id="overlay" role="m 122,157.36656 c 0,-0.8984 1.575,-4.72394 3.5,-8.50121 1.925,-3.77727 3.5,-7.53364 3.5,-8.3475 0,-1.64341 4.26645,-3.08924 5.98384,-2.02784 0.60363,0.37307 0.81923,1.55509 0.47911,2.62672 -0.60459,1.90489 -0.54408,1.9031 2.70933,-0.0804 3.50484,-2.13682 7.32609,-2.65699 8.27225,-1.12606 0.30942,0.50064 -1.03778,3.92689 -2.99377,7.61388 -1.95599,3.68699 -3.34613,6.91383 -3.0892,7.17076 C 142.15496,156.4883 152,144.71962 152,140.7824 c 0,-2.07889 4.64216,-3.54024 6.22331,-1.95909 0.76917,0.76917 0.007,3.11233 -2.66637,8.20029 -2.05879,3.91788 -3.51487,7.3518 -3.23574,7.63093 1.05266,1.05266 4.70697,-1.83671 7.48665,-5.91952 2.84543,-4.17937 10.4105,-18.58511 11.54529,-21.98501 0.63427,-1.90034 5.10345,-2.43828 6.15269,-0.74057 0.34312,0.55518 -1.24398,4.39311 -3.52689,8.52872 l -4.15074,7.5193 4.02363,-2.09724 c 3.19849,-1.66714 4.44655,-1.87089 6.0859,-0.99354 4.33888,2.3221 1.70199,8.646 -5.03913,12.08506 -4.1929,2.13906 -4.37766,3.94827 -0.4032,3.94827 2.3139,0 4.41145,-1.8378 13.41073,-11.75 3.32655,-3.66401 4.41647,-4.25 7.90479,-4.25 5.3769,0 7.48012,2.15091 7.00233,7.1611 -0.41652,4.3676 0.55193,4.78391 3.8723,1.66459 1.27295,-1.19588 2.31445,-1.72432 2.31445,-1.17432 0,1.45491 -4.13404,5.00778 -6.75,5.80108 -1.2375,0.37528 -2.25,1.0653 -2.25,1.53338 C 200,155.5817 193.27268,159 190.13197,159 186.71236,159 183,156.03973 183,153.31291 c 0,-1.36999 -0.51689,-1.20499 -2.75,0.87781 -5.49767,5.12764 -11.33015,6.39656 -13.21482,2.87502 -1.6943,-3.16584 -1.20247,-4.75381 1.86604,-6.02483 4.36225,-1.8069 7.77317,-5.76652 6.26586,-7.27383 -2.17749,-2.17749 -6.40206,1.43189 -10.0565,8.59203 -2.80122,5.48844 -3.8193,6.64089 -5.86658,6.64089 -2.08565,0 -2.40356,-0.38496 -2.01153,-2.43575 l 0.46562,-2.43576 -3.29407,2.51251 c -3.98446,3.0391 -7.76179,2.86039 -8.22331,-0.38904 l -0.3193,-2.24804 -3.27509,2.49804 c -3.56284,2.71751 -8.06538,3.29798 -8.89107,1.14625 -0.2853,-0.74348 0.63444,-3.90059 2.04387,-7.0158 1.40944,-3.11521 2.30826,-5.91836 1.99739,-6.22923 -1.47402,-1.47403 -5.20975,2.38356 -7.92283,8.18127 C 127.344,157.86205 126.38477,159 124.40574,159 122.84662,159 122,158.42516 122,157.36656 z m 73.78635,-3.55291 c 0.91512,-0.91512 0.81173,-1.60029 -0.45227,-2.99699 -0.90124,-0.99585 -1.60019,-3.162 -1.55323,-4.81365 0.11747,-4.13158 -0.55262,-3.7732 -2.91018,1.55645 -1.59157,3.59802 -1.76476,4.86322 -0.82132,6 1.45043,1.74766 4.12502,1.86617 5.737,0.25419 z m 4.02943,-9.09241 C 199.6421,143.49956 199.05,142.5 198.5,142.5 c -1.23708,0 -1.88591,4.05443 -1.01183,6.32273 0.59536,1.545 0.72507,1.537 1.64486,-0.10149 0.5492,-0.97831 0.85643,-2.77831 0.68275,-4 z m -43.76273,-9.15732 C 154.32376,133.48026 156.43493,130 159.42819,130 c 2.99266,0 3.84963,2.15835 1.93967,4.8852 -1.72469,2.46234 -3.63236,2.70595 -5.31481,0.67872 z" class="secondary"></div>
4.在CSS當(dāng)中為?product div.添加相對(duì)定位
.product {position:relative;}
5 最后, 在文檔加載完后，調(diào)用 productColorizer 插件調(diào)用任何您想要的選項(xiàng)

1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $('.product').productColorizer(); 4 }); 5 </script>

?演示（點(diǎn)擊下面的choose color顏色會(huì)變化）

選項(xiàng)

名稱描述

transparency	顏色疊加圖像的透明度。數(shù)在0-1之間;默認(rèn)值：0.55
secondaryTransparency	二次色疊加在圖像的透明度。數(shù)在0-1之間;默認(rèn)值：0.55
swatchTransparency	透明度的漸變顏色樣本數(shù)在0-1之間;默認(rèn)值：0.75
swatchClass	一類(lèi)的div包含的樣本。如果你改變它的默認(rèn)，確保相應(yīng)修改CSS?類(lèi)名的默認(rèn)值：swatch'

?本文鏈接：使用jquery打造一個(gè)動(dòng)態(tài)的預(yù)覽產(chǎn)品顏色效果
?

總結(jié)

以上是生活随笔為你收集整理的使用jquery打造一个动态的预览产品颜色效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。