图片html代码查看器,360度全景商品图片查看器

360 Degrees Product Viewer360度全景商品图图片查看器是个非常简单的轻松展示图片全景插件。

HTML

Handle

CSS

.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;

}

.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);

}

}

JS

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');

//increase this value to increase the friction while dragging on the image - it has to be bigger than zero

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

$('').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));

});

相关链接