这是一款简单实用的jQuery和CSS3 360度产品预览特效。该特效使用雪碧图来作为产品图片,通过拖动产品图片或滑块可以连续的修改雪碧图片帧,形成产品360度旋转的特效。
使用方法
HTML结构
该按360度旋转特效的HTML结构由2部分组成:一个是展示产品的雪碧图部分figure.product-viewer
,另外一个是拖动手柄div.cd-product-viewer-handle
。
<div class="cd-product-viewer-wrapper" data-frame="16" data-friction="0.33"> <div> <figure class="product-viewer"> <img src="img/product-loading.jpg" alt="Product Preview"> <div class="product-sprite" data-image="img/product.png"></div> </figure> <!-- .product-viewer --> <div class="cd-product-viewer-handle"> <span class="fill"></span> <span class="handle">Handle</span> </div> </div> <!-- .cd-product-viewer-handle --> </div> <!-- .cd-product-viewer-wrapper -->
div.cd-product-viewer-wrapper
中的data-frame
属性用于指定雪碧图中的图片帧数。data-friction
属性指定拖动图片时的摩擦系数。
CSS样式
用于预加载显示的图片<img>
只有在加载雪碧图的过程中才可见。
div.product-sprite
是显示雪碧图的容器,它使用绝对定位,高度为100%,宽度为1600%(雪碧图中有16张图片),并且默认是隐藏的。当雪碧图加载完成之后,div.product-sprite
会被添加.loaded
class类。
.cd-product-viewer-wrapper .product-viewer { position: relative; overflow: hidden; } .cd-product-viewer-wrapper img { /* this is the image visible before the image sprite is loaded */ display: block; position: relative; z-index: 1; } .cd-product-viewer-wrapper .product-sprite { position: absolute; z-index: 2; top: 0; left: 0; height: 100%; /* our image sprite is composed of 16 frames */ width: 1600%; background: url(../img/product.png) no-repeat center center; background-size: 100%; opacity: 0; transition: opacity 0.3s; } .cd-product-viewer-wrapper.loaded .product-sprite { /* image sprite has been loaded */ opacity: 1; }
当用户拖动span.handle
或产品图片的时候,通过修改div.product-sprite
的translateX
的值来显示不同的图片帧。
在页面初始化图片加载效果通过改变span.fill
元素的scaleX
值来实现(使用JavaScript)。当雪碧图被加载之后,span.fill
元素被隐藏,span.handle
元素被显示出来。
.cd-product-viewer-handle { position: relative; z-index: 2; width: 60%; max-width: 300px; height: 4px; background: #4d4d4d; } .cd-product-viewer-handle .fill { /* this is used to create the loading fill effect */ position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: 100%; border-radius: inherit; background: #b54240; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s; } .loaded .cd-product-viewer-handle .fill { /* image sprite has been loaded */ opacity: 0; } .cd-product-viewer-handle .handle { position: absolute; z-index: 2; display: inline-block; height: 44px; width: 44px; left: 0; top: -20px; background: #b54240 url(../img/cd-arrows.svg) no-repeat center center; border-radius: 50%; transform: translateX(-50%) scale(0); } .loaded .cd-product-viewer-handle .handle { /* image sprite has been loaded */ transform: translateX(-50%) scale(1); animation: cd-bounce 0.3s 0.3s; animation-fill-mode: both; } @keyframes cd-bounce { 0% { transform: translateX(-50%) scale(0); } 60% { transform: translateX(-50%) scale(1.1); } 100% { transform: translateX(-50%) scale(1); } }
JavaScript
在Js代码中,创建了一个productViewer
对象,并使用loadFrames
方法来检测雪碧图是否被加载。
var productViewer = function(element) { this.element = element; this.handleContainer = this.element.find('.cd-product-viewer-handle'); this.handleFill = this.handleContainer.children('.fill'); //... this.frames = this.element.data('frame'); this.friction = this.element.data('friction'); this.visibleFrame = 0; this.loaded = false; //... this.loadFrames(); } productViewer.prototype.loadFrames = function() { var self = this, imageUrl = this.slideShow.data('image'); //you need this to check if the image sprite has been loaded $('<img/>').attr('src', imageUrl).load(function() { self.loaded = true; }); this.loading('0.5'); //triggers loading animation } var productToursWrapper = $('.cd-product-viewer-wrapper'); productToursWrapper.each(function(){ new productViewer($(this)); });
当雪碧图被完全加载之后,就为相应的元素添加mousedown/mousemove/mouseup等事件。
if( self.loaded ){ //sprite image has been loaded self.element.addClass('loaded'); self.dragImage(); self.dragHandle(); //.. } else { //... }
这个360度特效也可以在手机上使用,它通过jQuery mobile framework提供的vmousedown/vmousemove/vmouseup事件来实现。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!