jquery衣服颜色选取插件

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery衣服颜色选取插件的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>jquery�·���ɫѡȡ���</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="js/jquery.productColorizer.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.productColorizer.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/init.js"></script>
</head>
<body>
<!-- /instructions -->

<div id="demo" class="container clearfix">
<h2>ʵ��</h2>
<h3>һ����ɫ��Ч��</h3>
<p>������һ����ɫ�仯��Ч��</p>
<div class="product-preview">
<div class="product">
<img src="images/blank_tshirt.jpg" alt="Shirt Image" />
<img id="mask" class="mask" src="images/shirt-mask.png" alt="Mask Image" />
</div>

<h3>Niko T-Shirt</h3>
<p>Look awesome</p>
<h4>Choose a Color:</h4>
<div class="swatch">
<a rel="255,255,255" href="#mask" title="White">White</a>
<a rel="32,223,95" href="#mask" title="Green">Green</a>
<a rel="255,211,8" href="#mask" title="Yellow">Yellow</a>
<a rel="255,101,8" href="#mask" title="Orange">Orange/a>
<a rel="16,200,255" href="#mask" title="Blue">Blue</a>
<a rel="142,8,255" href="#mask" title="Purple">Purple</a>
<a rel="245,25,45" href="#mask" title="Red">Red</a>
</div>
</div>
<h3>������ɫ</h3>
<p>һ����ɫ�����������Ҫ��Ļ����������������ɫ��Ч��.</p>
<div class="product-preview">
<div class="product">
<img src="images/blank_tshirt.jpg" alt="Shirt Image" />
<img id="tt-mask" class="mask" src="images/shirt-mask.png" alt="Mask Image" />
<div id="logo-mask" 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>
</div>

<h3>Niko T-Shirt</h3>
<p>Look awesome</p>
<h4>Choose a Base Color:</h4>
<div class="swatch">
<a rel="255,255,255" href="#tt-mask" title="White">White</a>
<a rel="32,223,95" href="#tt-mask" title="Green">Green</a>
<a rel="255,211,8" href="#tt-mask" title="Yellow">Yellow</a>
<a rel="255,101,8" href="#tt-mask" title="Orange">Orange</a>
<a rel="16,200,255" href="#tt-mask" title="Blue">Blue</a>
<a rel="142,8,255" href="#tt-mask" title="Purple">Purple</a>
<a rel="245,25,45" href="#tt-mask" title="Red">Red</a>
</div>
<h4>Choose a Logo Color:</h4>
<div class="swatch">
<a rel="255,255,255" href="#logo-mask" title="White">White</a>
<a rel="32,223,95" href="#logo-mask" title="Green">Green<</a>
<a rel="255,211,8" href="#logo-mask" title="Yellow">Yellow<</a>
<a rel="255,101,8" href="#logo-mask" title="Orange">Orange</a>
<a rel="16,200,255" href="#logo-mask" title="Blue">Blue</a>
<a rel="142,8,255" href="#logo-mask" title="Purple">Purple</a>
<a rel="245,25,45" href="#logo-mask" title="Red">Red</a>
</div>
</div>
</div><!-- /demo -->

<div id="options" class="container claerfix">
<h2>Options</h2>
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>transparency</td>
<td>Transparency of color overlaying the image. <br /><em>Number between 0-1; Default: 0.55</em></td>
</tr>
<tr>
<td>secondaryTransparency</td>
<td>Transparency of the secondary colors overlaying the image.<br /><em>Number between 0-1; Default: 0.55</em></td>
</tr>
<tr>
<td>swatchTransparency</td>
<td>Transparency of the color swatches for the gradient <br /><em>Number between 0-1; Default: 0.75</em></td>
</tr>
<tr>
<td>swatchClass</td>
<td>Class of the div containing the swatches. If you change it from the default, make sure to modify the css accordingly. <br /><em>'Class name'; Default: '.swatch'</em></td>
</tr>
</table>
</div><!-- /options -->
<!-- /download -->
<!-- /support -->
</body>
</html>

JS代码(init.js):

$(document).ready(function(){
	$('.product-preview').productColorizer({
	'secondaryTransparency':1}
);
	prettyPrint();
}
);

CSS代码(style.css):

/* css reset--------------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:none;}
/* global + clear--------------------------------------------- */
body{background:url(images/body_bg.jpg);font-family:'Asap',sans-serif;font-size:16px;}
a{outline:none;}
.container{width:800px;margin:0 auto;padding:20px;}
.container p{line-height:2em;color:#444;margin:0.2em 0;}
.container a{color:#13c562;text-decoration:none;}
.container a:hover{border-bottom:1px solid #13c562;}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}
/* header--------------------------------------------- */
h1{font-size:2em;color:#333;text-shadow:1px 1px 0 #fff;font-weight:bold;}
h1 sup{font-size:0.4em;font-weight:normal;font-family:Georgia,serif;color:#666;padding-bottom:20px;}
#masthead{background:url(images/border.png) repeat-x bottom left;margin-top:20px;}
#masthead a.logo{background:url(images/logo.png) no-repeat;width:154px;height:85px;display:block;text-indent:100%;white-space:nowrap;overflow:hidden;float:right;margin-top:-80px;}
#masthead a.logo:hover{border:none;}
h2{font-size:1.5em;color:#444;font-weight:bold;}
h3{font-size:1.2em;color:#ff6600;font-weight:bold;}
/* intro--------------------------------------------- */
#intro ul{list-style-type:none;padding:15px 0 0;font-weight:bold;}
#intro li{margin:0.5em 0;}
/* instructions--------------------------------------------- */
#instructions li{margin:1em 0;}
#instructions span.html-tag{font-family:Consolas,Monaco,"Andale Mono","Courier New",monospace;font-weight:bold;color:#13c562;}
#instructions img{background:url(images/transp.gif);}
/* demo--------------------------------------------- */
.product-preview{font-size:.85em;color:#444;margin:20px auto;width:325px;padding:25px;-moz-box-shadow:0 0 3px #817962;box-shadow:0 0 3px #817962;background:#fff;}
.product-preview h3,h4{margin:5px 0;line-height:1em;}
.product-preview h3{font-size:1.2em;font-weight:bold;margin-top:10px;}
.product-preview h4{margin-top:10px;color:#d6401d;background:url(images/icon_color.png) no-repeat;padding:1px 0 5px 18px;font-size:1.2em;}
.product-preview p{margin:0;}
.product-preview .product{position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background:#fff;padding:1px;border:1px solid #ccc;width:320px;height:400px;}
.product-preview .product img{top:1px;left:1px;}
.secondary{top:0px !important;left:2px !important;}
/* options--------------------------------------------- */
#options table{margin:10px 0;-moz-border-radius:5px;border-radius:5px;border-collapse:collapse;color:#444;border-left:1px solid #ccc;border-top:1px solid #ccc;}
#options th{text-align:left;font-weight:bold;}
#options th,#options td{padding:10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
#options em{font-style:italic;color:#999;font-size:0.85em;}
/* download--------------------------------------------- */
#license a.button,#license input{padding:10px 30px;display:block;float:left;color:#fff;-moz-border-radius:5px;border-radius:5px;-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);margin:20px 5px 0;}
#license a#download{background:#ec7126;border:1px solid #db5300;text-shadow:1px 1px 0 #db5300;}
#license .donate{background:#13c562;border:1px solid #35a940;text-shadow:1px 1px 0 #35a940;cursor:pointer;font-size:0.9em;}
#license a#download:hover{background-image:linear-gradient(bottom,rgb(232,132,75) 33%,rgb(236,114,38) 69%);background-image:-o-linear-gradient(bottom,rgb(232,132,75) 33%,rgb(236,114,38) 69%);background-image:-moz-linear-gradient(bottom,rgb(232,132,75) 33%,rgb(236,114,38) 69%);background-image:-webkit-linear-gradient(bottom,rgb(232,132,75) 33%,rgb(236,114,38) 69%);background-image:-ms-linear-gradient(bottom,rgb(232,132,75) 33%,rgb(236,114,38) 69%);}
#license .donate:hover{background-image:linear-gradient(bottom,rgb(65,196,122) 27%,rgb(19,197,99) 64%);background-image:-o-linear-gradient(bottom,rgb(65,196,122) 27%,rgb(19,197,99) 64%);background-image:-moz-linear-gradient(bottom,rgb(65,196,122) 27%,rgb(19,197,99) 64%);background-image:-webkit-linear-gradient(bottom,rgb(65,196,122) 27%,rgb(19,197,99) 64%);background-image:-ms-linear-gradient(bottom,rgb(65,196,122) 27%,rgb(19,197,99) 64%);}
#license a.button:active{margin-top:21px;margin-bottom:-1px;}
/* code--------------------------------------------- */
code,pre{font-family:Consolas,Monaco,"Andale Mono","Courier New",monospace;font-size:14px;white-space:pre-wrap;overflow:auto;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
code{padding:0 3px;line-height:23px;}
pre{display:block;padding:10px 15px;margin:0 0 22px;background-color:#fafae6;border:1px solid #ddd;white-space:pre;overflow:auto;overflow-y:hidden;*padding-bottom:20px;/* Remove vertical scrollbar on Ie6,IE7 */
}
@media screen{.str{color:#080}
/* string content */
.kwd{color:#008}
/* a keyword */
.com{color:#800}
/* a comment */
.typ{color:#606}
/* a type name */
.lit{color:#066}
/* a literal value */
/* punctuation,lisp open bracket,lisp close bracket */
.pun,.opn,.clo{color:#660}
.tag{color:#008}
/* a markup tag name */
.atn{color:#606}
/* a markup attribute name */
.atv{color:#080}
/* a markup attribute value */
.dec,.var{color:#606}
/* a declaration;a variable name */
.fun{color:red}
/* a function name */
}
@media print,projection{.str{color:#060}
.kwd{color:#006;font-weight:bold}
.com{color:#600;font-style:italic}
.typ{color:#404;font-weight:bold}
.lit{color:#044}
.pun,.opn,.clo{color:#440}
.tag{color:#006;font-weight:bold}
.atn{color:#404}
.atv{color:#060}
}
/* footer--------------------------------------------- */
#footer{padding:30px 20px;background:url(images/border.png) repeat-x top left;}
#footer p{font-size:0.85em;}

附件:下载该文件资源,减少时间成本(增值服务)