网站后台如何修改密码,在网上怎么建立自己的网站,免费公司logo设计,电子商城有哪些在浏览一些电子商务网站的时候#xff0c;选择一件产品的时候#xff0c;我们经常会看到点击衣服的颜色#xff0c;同一件衣服的颜色就会切换#xff0c;让我们觉得真是比较有意思#xff0c;这样做的效果给用户的体验比较好#xff0c;今天就给大家分享一下这种效果的实…在浏览一些电子商务网站的时候选择一件产品的时候我们经常会看到点击衣服的颜色同一件衣服的颜色就会切换让我们觉得真是比较有意思这样做的效果给用户的体验比较好今天就给大家分享一下这种效果的实现原理 productColorizer是一个轻量级的产品颜色解决方案用户可以快速预览产品以选择不同的颜色。该插件每个产品只使用两个图像来创建效果它是建立在强大的和流行的Javascript框架和jQuery为您提供一个简单的设置。该插件兼容所有主要的浏览器包括IE7 使用PNG修复可以运行在IE6当中。 根据你的浏览习惯为你推荐 前端开发推荐-创建一个精美的jquery图片库效果前沿设计推荐-让你的404页面飞起来-使用jquery创建一个会飞的404页面分享5个实用的Javascript动态更新图标插件前沿设计推荐-使用jquery打造动感的浮动web界面jquery视差推荐nikebetterworld视差平滑滚动效果 废话少多先来个演示点击下面的choose color颜色会发生变化 目录结构 说明演示选项 说明 下载解压缩将文件上传到你的服务器。放在head头部这里就不多说了 1 !-- Load jQuery Library First --
2 script typetext/javascript srchttps://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js/script
3 !-- Load raphael library --
4 lgt;script typetext/javascript srcjs/raphael-min.js/script
5 !-- Load productColorizer Plugin Next --
6 script typetext/javascript srcjs/jquery.productColorizer.pack.js/script
7 一种颜色 现在准备图像为了得到一张基本的颜色产品我们将我们需要两个图像、 产品和透明的合影。接下来将创建蒙版。 创建蒙版用钢笔工具在图像编辑器跟踪需要彩色图像的部分。一旦追踪了整个图像选择形状并删除所选区域的照片。这个图像保存为一个透明的PNG图片 下面是我使用的两个图像原图和png透明 两种或更多种颜色 为了在一个产品里显示两张不同的颜色这里控制LOGO的颜色和背景的颜色作为搭配详细的例子看最下面的DEMO 现在开始编写我们的html部分每个产品都被定义一个名字为product的类Div,在该产品的div将有一个product-img的div其中包含默认的产品形象和透明的图像然后你将有一个swatch div 包含所有你想要的可供选择颜色并且定义了锚的链接。如下面的代码 1 div classproduct2 div classproduct-img3 img srcimages/default.jpg /4 img idmask classmask srcimages/mask.png /5 /div6 7 h3Product Title/h38 pProduct Description/p9 h4Choose a Color:/h4
10 div classswatch
11 a rel32,223,95 href#mask titleGreenGreen/a
12 a rel255,211,8 href#mask titleYellowYellow/a
13 a rel255,101,8 href#mask titleOrangeOrange/a
14 a rel16,200,255 href#mask titleBlueBlue/a
15 a rel142,8,255 href#mask titlePurplePurple/a
16 a rel245,25,45 href#mask titleRedRed/a
17 /div
18 /div rel属性将包含您想要的颜色的RGB值 href 属性 定位到 透明图像的ID, 标题属性提供了工具提示让用户知道什么颜色。 1 a relred,green,blue hrefmask-id titleColor NameColor Name/a 两种或更多种颜色 如果你需要两种颜色你需要两种不同的swatch divs来进行分区颜色您还需要另一个透明图像内的产品IMG的 div下面的代码跟上面的差不多只不过是多了一种颜色选择 1 div classproduct2 div classproduct-img3 img srcimages/default.jpg /4 img idmask classmask srcimages/mask.png /5 div idoverlay classsecondary/div6 /div7 8 h3Product Title/h39 pProduct Description/p
10 h4Choose a Color:/h4
11 div classswatch
12 a rel32,223,95 href#mask titleGreenGreen/a
13 a rel255,211,8 href#mask titleYellowYellow/a
14 a rel255,101,8 href#mask titleOrangeOrange/a
15 a rel16,200,255 href#mask titleBlueBlue/a
16 a rel142,8,255 href#mask titlePurplePurple/a
17 a rel245,25,45 href#mask titleRedRed/a
18 /div
19 div classswatch
20 a rel32,223,95 href#overlay titleGreenGreen/a
21 a rel255,211,8 href#overlay titleYellowYellow/a
22 a rel255,101,8 href#overlay titleOrangeOrange/a
23 a rel16,200,255 href#overlay titleBlueBlue/a
24 a rel142,8,255 href#overlay titlePurplePurple/a
25 a rel245,25,45 href#overlay titleRedRed/a
26 /div
27 /div 注意到另一种颜色的描点被定义了不同的ID 现在我们查看SVG文件。在Firefox中打开文件查看源文件。如果向下滚动你应该看到一些代码看起来像这样 1 path
2 stylefill:#000000
3 dPATH INFORMATION
4 idpath3065
5 inkscape:connector-curvature0 / 复制里面所有的路径信息的d属性的。作用是告诉什么形状的覆盖层。 1 div idoverlay rolem 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 classsecondary/div 4.在CSS当中为 product div.添加相对定位 .product {position:relative;} 5 最后, 在文档加载完后调用 productColorizer 插件调用任何您想要的选项 1 script typetext/javascript
2 $(document).ready(function(){
3 $(.product).productColorizer();
4 });
5 /script 演示点击下面的choose color颜色会变化 选项 名称描述transparency颜色叠加图像的透明度。数在0-1之间;默认值0.55secondaryTransparency二次色叠加在图像的透明度。数在0-1之间;默认值0.55swatchTransparency透明度的渐变颜色样本数在0-1之间;默认值0.75swatchClass一类的div包含的样本。如果你改变它的默认确保相应修改CSS 类名的默认值swatch 本文链接使用jquery打造一个动态的预览产品颜色效果
