全景360度产品预览jQuery特效

PetitQ 图片/图形 2018-11-16 1.75K 0 0

这是一款简单实用的 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> 
```
```
 
```

    <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 事件来实现。

全景 360 度产品预览 jQuery 特效

已有 439 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

全景360度产品预览jQuery特效

HTML 结构

CSS 样式

JavaScript

全景 360 度产品预览 jQuery 特效

相关文章

gifplayer 控制GIF动画图片播放暂停jQuery插件

纯CSS3制作逼真的汽车运动动画

html5 svg和css3超神奇图片鼠标hover动画效果

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

JavaScript

全景 360 度产品预览 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复