编程 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 相关文章推荐

JavaScript使用prototype定义对象类型

Feb 07 Javascript

动感效果的TAB选项卡jquery 插件

Jul 09 Javascript

一个网页标题title的闪动提示效果实现思路

Mar 22 Javascript

JavaScript无阻塞加载和defer、async详解

Feb 26 Javascript

详解Vuejs2.0 如何利用proxyTable实现跨域请求

Aug 03 Javascript

vue 里面使用axios 和封装的示例代码

Sep 01 Javascript

jquery 一键复制到剪切板的实例

Sep 20 jQuery

Bootstrap图片轮播效果详解

Oct 17 Javascript

pace.js和NProgress.js两个加载进度插件的一点小总结

Jan 31 Javascript

JavaScript数值类型知识汇总

Nov 17 Javascript

JS实现简单日历特效

Jan 03 Javascript

如何检测JavaScript中的死循环示例详解

Aug 30 Javascript

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中实现Javascript的escape()函数代码

2010/08/08 PHP

PHP获取中英混合字符串长度的方法

2014/06/07 PHP

php中filter_input函数用法分析

2014/11/15 PHP

php打印一个边长为N的实心和空心菱型的方法

2015/03/02 PHP

PHP面向对象程序设计之多态性的应用示例

2018/12/19 PHP

javascript脚本编程解决考试分数统计问题

2008/10/18 Javascript

高效的表格行背景隔行变色及选定高亮的JS代码

2010/12/04 Javascript

javascript椭圆旋转相册实现代码

2012/01/16 Javascript

浅谈jQuery异步对象（XMLHttpRequest）

2014/11/17 Javascript

jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法

2016/08/06 Javascript

jQuery实现邮箱下拉列表自动补全功能

2016/09/08 Javascript

BootStrap整体框架之基础布局组件

2016/12/15 Javascript

slideToggle+slideup实现手机端折叠菜单效果

2017/05/25 Javascript

Node.js连接Sql Server 2008及数据层封装详解

2018/08/27 Javascript

vue远程加载sfc组件思路详解

2019/12/25 Javascript

nodejs制作小爬虫功能示例

2020/02/24 NodeJs

vue+iview实现分页及查询功能

2020/11/17 Vue.js

使用Mixin设计模式进行Python编程的方法讲解

2016/06/21 Python

Python数据结构之双向链表的定义与使用方法示例

2018/01/16 Python

python画图系列之个性化显示x轴区段文字的实例

2018/12/13 Python

python pandas.DataFrame.loc函数使用详解

2020/03/26 Python

如何利用python web框架做文件流下载的实现示例

2020/06/02 Python

解决PyCharm不在run输出运行结果而不是再Console里输出的问题

2020/09/21 Python

如何在 Matplotlib 中更改绘图背景的实现

2020/11/26 Python

Python 按比例获取样本数据或执行任务的实现代码

2020/12/03 Python

CSS3实现时间轴特效

2020/11/02 HTML / CSS

HTML5 和小程序实现拍照图片旋转、压缩和上传功能

2018/10/08 HTML / CSS

实例讲解HTML5的meta标签的一些应用

2015/12/08 HTML / CSS

Web Service面试题：如何搭建Axis2的开发环境

2012/06/20 面试题

在Java开发中如何选择使用哪种集合类

2016/08/09 面试题

畜牧兽医本科生个人的自我评价

2013/10/11 职场文书

汽车销售顾问求职自荐信

2014/01/01 职场文书

活动邀请函范文

2014/01/19 职场文书

个人主要事迹材料

2014/08/26 职场文书

详解NodeJS模块化

2021/06/15 NodeJs

Win11怎样将锁屏账户头像图片改成动画视频

2021/11/21 数码科技