在电子商务的设计，主要目标之一是，以填补产品和用户之间的差距。这是高价商品尤为重要。因此，重要性整合互动工具，向用户提供了一种方式，以“虚拟体验”的产品。
今天的资源是可以用来显示产品的虚拟游览一个简单的交互式资源。代码段背后的想法是使用图像精灵和拖动链接到该图像的特定帧。你可以用它来显示技术的小工具的外部（或汽车，像我们的演示！），或在一般情况下，创建花哨的产品动画。
创建结构
该HTML结构由两个主要部分组成：figure.product-观众的精灵形象和产品预览图像，以及div.cd产品查看器手柄为观众手柄。
<div id="crayon-5722b10f82d17060161546-1" class="crayon-line"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"cd-product-viewer-wrapper"</span> <span class="crayon-e ">data-frame</span><span class="crayon-o">=</span><span class="crayon-s ">"16"</span> <span class="crayon-e ">data-friction</span><span class="crayon-o">=</span><span class="crayon-s ">"0.33"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-2" class="crayon-line"><span class="crayon-r "><div></span></div>
<div id="crayon-5722b10f82d17060161546-3" class="crayon-line"><span class="crayon-r "><figure </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"product-viewer"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-4" class="crayon-line"><span class="crayon-r "><img </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s ">"img/product-loading.jpg"</span> <span class="crayon-e ">alt</span><span class="crayon-o">=</span><span class="crayon-s ">"Product Preview"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-5" class="crayon-line"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"product-sprite"</span> <span class="crayon-e ">data-image</span><span class="crayon-o">=</span><span class="crayon-s ">"img/product.png"</span><span class="crayon-r ">></span><span class="crayon-r "></div></span></div>
<div id="crayon-5722b10f82d17060161546-6" class="crayon-line"><span class="crayon-r "></figure></span> <span class="crayon-c"><!– .product-viewer –></span></div>
<div id="crayon-5722b10f82d17060161546-7" class="crayon-line"></div>
<div id="crayon-5722b10f82d17060161546-8" class="crayon-line"><span class="crayon-r "><div </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"cd-product-viewer-handle"</span><span class="crayon-r ">></span></div>
<div id="crayon-5722b10f82d17060161546-9" class="crayon-line"><span class="crayon-r "><span </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"fill"</span><span class="crayon-r ">></span><span class="crayon-r "></span></span></div>
<div id="crayon-5722b10f82d17060161546-10" class="crayon-line"><span class="crayon-r "><span </span><span class="crayon-e ">class</span><span class="crayon-o">=</span><span class="crayon-s ">"handle"</span><span class="crayon-r ">></span><span class="crayon-i ">Handle</span><span class="crayon-r "></span></span></div>
<div id="crayon-5722b10f82d17060161546-11" class="crayon-line"><span class="crayon-r "></div></span></div>
<div id="crayon-5722b10f82d17060161546-12" class="crayon-line"><span class="crayon-r "></div></span> <span class="crayon-c"><!– .cd-product-viewer-handle –></span></div>
<div id="crayon-5722b10f82d17060161546-13" class="crayon-line"><span class="crayon-r "></div></span> <span class="crayon-c"><!– .cd-product-viewer-wrapper –></span></div>
该数据帧的属性div.cd产物-观察者包装指定图像精灵由帧的数量，而数据摩擦指定摩擦而在图像上拖动（它必须大于零） 。
添加样式
在<IMG>元素可见仅在开始时，当图像精灵仍在加载，并且被用来提供正确的尺寸的figure.product-观察者元素。
至于div.product-精灵，它具有一个绝对位置，100％和1600％的宽度，高度（我们的形象精灵是由16帧），并默认是隐藏的。该.loaded那么类是用来显示 div.product魍魉一旦图像精灵已经加载：
<div id="crayon-5722b10f82d30889327578-1" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-wrapper .product-viewer </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d30889327578-2" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">relative</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-3" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span> <span class="crayon-i ">hidden</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-4" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d30889327578-5" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-wrapper img </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d30889327578-6" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-c">/* this is the image visible before the image sprite is loaded */</span></div>
<div id="crayon-5722b10f82d30889327578-7" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">display</span><span class="crayon-sy">:</span> <span class="crayon-i ">block</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-8" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">relative</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-9" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span> <span class="crayon-i ">1</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-10" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d30889327578-11" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-wrapper .product-sprite </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d30889327578-12" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-13" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span> <span class="crayon-i ">2</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-14" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">top</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-15" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">left</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-16" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-17" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-c">/* our image sprite is composed of 16 frames */</span></div>
<div id="crayon-5722b10f82d30889327578-18" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">1600%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-19" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">background</span><span class="crayon-sy">:</span> <span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">../img/product.png</span><span class="crayon-sy">)</span> <span class="crayon-i ">no-repeat</span> <span class="crayon-i ">center</span> <span class="crayon-i ">center</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-20" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">background-size</span><span class="crayon-sy">:</span> <span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-21" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">opacity</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-22" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transition</span><span class="crayon-sy">:</span> <span class="crayon-i ">opacity</span> <span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-23" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d30889327578-24" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-wrapper.loaded .product-sprite </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d30889327578-25" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-c">/* image sprite has been loaded */</span></div>
<div id="crayon-5722b10f82d30889327578-26" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">opacity</span><span class="crayon-sy">:</span> <span class="crayon-i ">1</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d30889327578-27" class="crayon-line"><span class="crayon-sy">}</span></div>
当用户拖动span.handle或产品形象，我们改变div.product魍魉 translateX值，显示出不同的图像帧（使用JavaScript）。
注：撰写你的形象精灵帧应该有产品的预览图像相同的纵横比。
手柄加载效应是通过改变达到的scaleX的值span.fill元件（使用JavaScript）; 一旦像精灵已经被加载， span.fill被隐藏，span.handle所示：
<div id="crayon-5722b10f82d3e421110135-1" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-handle </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-2" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">relative</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-3" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span> <span class="crayon-i ">2</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-4" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">60%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-5" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">max-width</span><span class="crayon-sy">:</span> <span class="crayon-i ">300px</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-6" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">4px</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-7" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">background</span><span class="crayon-sy">:</span> <span class="crayon-i ">#4d4d4d</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-8" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-9" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-handle .fill </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-10" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-c">/* this is used to create the loading fill effect */</span></div>
<div id="crayon-5722b10f82d3e421110135-11" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-12" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span> <span class="crayon-i ">1</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-13" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">left</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-14" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">top</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-15" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-16" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-17" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span> <span class="crayon-i ">inherit</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-18" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">background</span><span class="crayon-sy">:</span> <span class="crayon-i ">#b54240</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-19" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transform</span><span class="crayon-sy">:</span> <span class="crayon-i ">scaleX</span><span class="crayon-sy">(</span><span class="crayon-i ">0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-20" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transform-origin</span><span class="crayon-sy">:</span> <span class="crayon-i ">left</span> <span class="crayon-i ">center</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-21" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transition</span><span class="crayon-sy">:</span> <span class="crayon-i ">transform</span> <span class="crayon-i ">0.5s</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-22" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-23" class="crayon-line"><span class="crayon-k ">.loaded .cd-product-viewer-handle .fill </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-24" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-c">/* image sprite has been loaded */</span></div>
<div id="crayon-5722b10f82d3e421110135-25" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">opacity</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-26" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-27" class="crayon-line"><span class="crayon-k ">.cd-product-viewer-handle .handle </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-28" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">position</span><span class="crayon-sy">:</span> <span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-29" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">z-index</span><span class="crayon-sy">:</span> <span class="crayon-i ">2</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-30" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">display</span><span class="crayon-sy">:</span> <span class="crayon-i ">inline-block</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-31" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">height</span><span class="crayon-sy">:</span> <span class="crayon-i ">44px</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-32" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">width</span><span class="crayon-sy">:</span> <span class="crayon-i ">44px</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-33" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">left</span><span class="crayon-sy">:</span> <span class="crayon-i ">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-34" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">top</span><span class="crayon-sy">:</span> <span class="crayon-i ">-20px</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-35" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">background</span><span class="crayon-sy">:</span> <span class="crayon-i ">#b54240</span> <span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-i ">../img/cd-arrows.svg</span><span class="crayon-sy">)</span> <span class="crayon-i ">no-repeat</span> <span class="crayon-i ">center</span> <span class="crayon-i ">center</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-36" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">border-radius</span><span class="crayon-sy">:</span> <span class="crayon-i ">50%</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-37" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transform</span><span class="crayon-sy">:</span> <span class="crayon-i ">translateX</span><span class="crayon-sy">(</span><span class="crayon-i ">-50%</span><span class="crayon-sy">)</span> <span class="crayon-i ">scale</span><span class="crayon-sy">(</span><span class="crayon-i ">0</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-38" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-39" class="crayon-line"><span class="crayon-k ">.loaded .cd-product-viewer-handle .handle </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-40" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-c">/* image sprite has been loaded */</span></div>
<div id="crayon-5722b10f82d3e421110135-41" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transform</span><span class="crayon-sy">:</span> <span class="crayon-i ">translateX</span><span class="crayon-sy">(</span><span class="crayon-i ">-50%</span><span class="crayon-sy">)</span> <span class="crayon-i ">scale</span><span class="crayon-sy">(</span><span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-42" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">animation</span><span class="crayon-sy">:</span> <span class="crayon-i ">cd-bounce</span> <span class="crayon-i ">0.3s</span> <span class="crayon-i ">0.3s</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-43" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">animation-fill-mode</span><span class="crayon-sy">:</span> <span class="crayon-i ">both</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-44" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-45" class="crayon-line"><span class="crayon-n">@keyframes cd-bounce {</span></div>
<div id="crayon-5722b10f82d3e421110135-46" class="crayon-line"><span class="crayon-n"> 0% {</span></div>
<div id="crayon-5722b10f82d3e421110135-47" class="crayon-line"><span class="crayon-n"> transform: translateX(-50%) scale(0);</span></div>
<div id="crayon-5722b10f82d3e421110135-48" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-49" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-k ">60% </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-50" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transform</span><span class="crayon-sy">:</span> <span class="crayon-i ">translateX</span><span class="crayon-sy">(</span><span class="crayon-i ">-50%</span><span class="crayon-sy">)</span> <span class="crayon-i ">scale</span><span class="crayon-sy">(</span><span class="crayon-i ">1.1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-51" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-52" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-k ">100% </span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d3e421110135-53" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-e ">transform</span><span class="crayon-sy">:</span> <span class="crayon-i ">translateX</span><span class="crayon-sy">(</span><span class="crayon-i ">-50%</span><span class="crayon-sy">)</span> <span class="crayon-i ">scale</span><span class="crayon-sy">(</span><span class="crayon-i ">1</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d3e421110135-54" class="crayon-line"><span class="crayon-h"> </span><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d3e421110135-55" class="crayon-line"><span class="crayon-sy">}</span></div>
事件处理
为了实现产品的观众，我们创建了一个productViewer 对象，并使用loadFrames方法来检查图像精灵是否已经被加载：
<div id="crayon-5722b10f82d4b322206910-1" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">productViewer</span> <span class="crayon-o">=</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">element</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d4b322206910-2" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">element</span> <span class="crayon-o">=</span> <span class="crayon-v">element</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-3" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleContainer</span> <span class="crayon-o">=</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">find</span><span class="crayon-sy">(</span><span class="crayon-s">'.cd-product-viewer-handle'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-4" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleFill</span> <span class="crayon-o">=</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleContainer</span><span class="crayon-sy">.</span><span class="crayon-e">children</span><span class="crayon-sy">(</span><span class="crayon-s">'.fill'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-5" class="crayon-line"><span class="crayon-c">//…</span></div>
<div id="crayon-5722b10f82d4b322206910-6" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">frames</span> <span class="crayon-o">=</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">data</span><span class="crayon-sy">(</span><span class="crayon-s">'frame'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-7" class="crayon-line"><span class="crayon-c">//increase this value to increase the friction while dragging on the image – it has to be bigger than zero</span></div>
<div id="crayon-5722b10f82d4b322206910-8" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">friction</span> <span class="crayon-o">=</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">data</span><span class="crayon-sy">(</span><span class="crayon-s">'friction'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-9" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">visibleFrame</span> <span class="crayon-o">=</span> <span class="crayon-cn">0</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-10" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">loaded</span> <span class="crayon-o">=</span> <span class="crayon-t">false</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-11" class="crayon-line"><span class="crayon-c">//…</span></div>
<div id="crayon-5722b10f82d4b322206910-12" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">loadFrames</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-13" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d4b322206910-14" class="crayon-line"></div>
<div id="crayon-5722b10f82d4b322206910-15" class="crayon-line"><span class="crayon-v">productViewer</span><span class="crayon-sy">.</span><span class="crayon-v">prototype</span><span class="crayon-sy">.</span><span class="crayon-v">loadFrames</span> <span class="crayon-o">=</span> <span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d4b322206910-16" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-r">self</span> <span class="crayon-o">=</span> <span class="crayon-r">this</span><span class="crayon-sy">,</span></div>
<div id="crayon-5722b10f82d4b322206910-17" class="crayon-line"><span class="crayon-v">imageUrl</span> <span class="crayon-o">=</span> <span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">slideShow</span><span class="crayon-sy">.</span><span class="crayon-e">data</span><span class="crayon-sy">(</span><span class="crayon-s">'image'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-18" class="crayon-line"><span class="crayon-c">//you need this to check if the image sprite has been loaded</span></div>
<div id="crayon-5722b10f82d4b322206910-19" class="crayon-line"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'<img/>'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">attr</span><span class="crayon-sy">(</span><span class="crayon-s">'src'</span><span class="crayon-sy">,</span> <span class="crayon-v">imageUrl</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">load</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d4b322206910-20" class="crayon-line"><span class="crayon-r">self</span><span class="crayon-sy">.</span><span class="crayon-v">loaded</span> <span class="crayon-o">=</span> <span class="crayon-t">true</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-21" class="crayon-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-22" class="crayon-line"></div>
<div id="crayon-5722b10f82d4b322206910-23" class="crayon-line"><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">loading</span><span class="crayon-sy">(</span><span class="crayon-s">'0.5'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span> <span class="crayon-c">//triggers loading animation</span></div>
<div id="crayon-5722b10f82d4b322206910-24" class="crayon-line"><span class="crayon-sy">}</span></div>
<div id="crayon-5722b10f82d4b322206910-25" class="crayon-line"></div>
<div id="crayon-5722b10f82d4b322206910-26" class="crayon-line"><span class="crayon-t">var</span> <span class="crayon-v">productToursWrapper</span> <span class="crayon-o">=</span> <span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.cd-product-viewer-wrapper'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-27" class="crayon-line"><span class="crayon-v">productToursWrapper</span><span class="crayon-sy">.</span><span class="crayon-st">each</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d4b322206910-28" class="crayon-line"><span class="crayon-r">new</span> <span class="crayon-e">productViewer</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d4b322206910-29" class="crayon-line"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
一旦图像精灵已经加载的，所以我们对鼠标按下/鼠标移动/鼠标松开事件，以适当的元素的事件处理程序：
<div id="crayon-5722b10f82d58213933442-1" class="crayon-line"><span class="crayon-st">if</span><span class="crayon-sy">(</span> <span class="crayon-r">self</span><span class="crayon-sy">.</span><span class="crayon-i">loaded</span> <span class="crayon-sy">)</span><span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d58213933442-2" class="crayon-line"><span class="crayon-c">//sprite image has been loaded</span></div>
<div id="crayon-5722b10f82d58213933442-3" class="crayon-line"><span class="crayon-r">self</span><span class="crayon-sy">.</span><span class="crayon-v">element</span><span class="crayon-sy">.</span><span class="crayon-e">addClass</span><span class="crayon-sy">(</span><span class="crayon-s">'loaded'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d58213933442-4" class="crayon-line"><span class="crayon-r">self</span><span class="crayon-sy">.</span><span class="crayon-e">dragImage</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d58213933442-5" class="crayon-line"><span class="crayon-r">self</span><span class="crayon-sy">.</span><span class="crayon-e">dragHandle</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div>
<div id="crayon-5722b10f82d58213933442-6" class="crayon-line"><span class="crayon-c">//..</span></div>
<div id="crayon-5722b10f82d58213933442-7" class="crayon-line"><span class="crayon-sy">}</span> <span class="crayon-st">else</span> <span class="crayon-sy">{</span></div>
<div id="crayon-5722b10f82d58213933442-8" class="crayon-line"><span class="crayon-c">//…</span></div>
<div id="crayon-5722b10f82d58213933442-9" class="crayon-line"><span class="crayon-sy">}</span></div>
对于这种效应在触摸设备上工作，我们所使用的提供的vmousedown / vmousemove / vmouseup事件的jQuery Mobile框架。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/courses/259261.html