编程 Javascript

jquery衣服颜色选取插件效果代码分享

Posted in Javascript onAugust 28, 2015

本文实例讲述了jquery衣服颜色选取插件效果。分享给大家供大家参考。具体如下：
这是一款基于jquery实现衣服颜色选取插件效果代码，有了这个插件可以为自己搭配衣服颜色，自己就是设计师，为自己设计独一无二的衣服，是一款非常实用的特效代码，值得大家学习。
运行效果图：-------------------查看效果下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jquery衣服颜色选取插件效果代码如下

<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 -->
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的jquery衣服颜色选取插件效果代码，希望大家可以喜欢。

jquery衣服颜色选取插件效果代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS取文本框中最小值的简单实例

Nov 29 Javascript

javascript中返回顶部按钮的实现

May 05 Javascript

浅谈js的html元素的父节点,子节点

Aug 06 Javascript

vue实现简单表格组件实例详解

Apr 16 Javascript

AngularJS中使用three.js的实例详解

Jul 21 Javascript

node中使用es5/6以及支持性与性能对比

Aug 11 Javascript

JavaScript实现元素滚动条到达一定位置循环追加内容

Dec 28 Javascript

详解关于vue-area-linkage走过的坑

Jun 27 Javascript

Vue一个案例引发的递归组件的使用详解

Nov 15 Javascript

JS字符串与二进制的相互转化实例代码详解

Jun 28 Javascript

javascript实现贪吃蛇小游戏

Jul 28 Javascript

VUE之图片Base64编码使用ElementUI组件上传

Apr 09 Vue.js

jQuery表单验证功能实例

Aug 28 #Javascript

jquery实现带缩略图的可定制高度画廊效果（5种）

Aug 28 #Javascript

通过XMLHttpRequest和jQuery实现ajax的几种方式

Aug 28 #Javascript

jQuery实现平滑滚动的标签分栏切换效果

Aug 28 #Javascript

jquery图片滚动放大代码分享（2）

Aug 28 #Javascript

浅谈JavaScript中的string拥有方法的原因

Aug 28 #Javascript

zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题

Aug 27 #Javascript

You might like

php断点续传之如何分割合并文件

2014/03/22 PHP

php强制文件下载而非在浏览器打开的自定义函数分享

2014/05/08 PHP

yii实现使用CUploadedFile上传文件的方法

2015/12/28 PHP

php unicode编码和字符串互转的方法

2020/08/12 PHP

phpstudy默认不支持64位php的解决方法

2017/02/20 PHP

Laravel框架实现的上传图片到七牛功能详解

2019/09/06 PHP

什么是JavaScript

2009/08/13 Javascript

基于Jquery的简单图片切换效果

2011/01/06 Javascript

js调用activeX获取u盘序列号的代码

2011/11/21 Javascript

JS正则表达式验证数字代码

2014/01/28 Javascript

jQuery中prepend()方法用法实例

2014/12/25 Javascript

浅谈javascript中的闭包

2015/05/13 Javascript

javascript实现动态表头及表列的展现方法

2015/07/14 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

2016/12/08 Javascript

js使用i18n实现页面国际化的方法

2017/05/09 Javascript

使用Angular CLI从蓝本生成代码详解

2018/03/24 Javascript

animate.css在vue项目中的使用教程

2018/08/05 Javascript

python结合opencv实现人脸检测与跟踪

2015/06/08 Python

python并发2之使用asyncio处理并发

2017/12/21 Python

Python实现XML文件解析的示例代码

2018/02/05 Python

python3获取两个日期之间所有日期,以及比较大小的实例

2018/04/08 Python

python使用__slots__让你的代码更加节省内存

2018/09/05 Python

python3.7 的新特性详解

2019/07/25 Python

python numpy中cumsum的用法详解

2019/10/17 Python

Python GUI自动化实现绕过验证码登录

2020/01/10 Python

python 已知平行四边形三个点,求第四个点的案例

2020/04/12 Python

python实现跨年表白神器--你值得拥有

2021/01/04 Python

公司证明怎么写

2014/09/22 职场文书

优秀共青团员事迹材料

2014/12/25 职场文书

公司市场部岗位职责

2015/04/15 职场文书

2015年大学生党员承诺书

2015/04/27 职场文书

2016年情人节问候语

2015/11/11 职场文书

手把手教你实现PyTorch的MNIST数据集

2021/06/28 Python

直播实况, OMG破敌三路五十分钟大战神技局摩托车

2022/04/01 DOTA

Python实现科学占卜让视频自动打码

2022/04/09 Python

Spring JPA 增加字段执行异常问题及解决

2022/06/10 Java/Android