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


Posted in Javascript onAugust 28, 2015

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

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衣服颜色选取插件效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
js实现上传图片到服务器
Apr 11 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
小议Javascript中的this指针
2010/03/18 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python设定并获取socket超时时间的方法
2019/01/12 Python
Python 文件数据读写的具体实现
2020/01/24 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
Python如何实现单例模式
2016/06/03 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
安全责任书范本
2014/04/15 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
平安工地建设方案
2014/05/06 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书