当前位置：首页 > 网页特效 > 图片特效

jQuery和CSS3 360度产品预览特效

分类：图片特效日期：2024-05-14 点击(0) 评论(0)

简介

#### HTML结构
该按360度旋转特效的HTML结构由2部分组成：一个是展示产品的雪碧图部分figure.product-viewer，另外一个是拖动手柄div.cd-product-viewer-handle。

```html
<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> 
</div> 
```
div.cd-product-viewer-wrapper中的data-frame属性用于指定雪碧图中的图片帧数。data-friction属性指定拖动图片时的摩擦系数。

####  CSS样式
用于预加载显示的图片img只有在加载雪碧图的过程中才可见。

div.product-sprite是显示雪碧图的容器，它使用绝对定位，高度为100%，宽度为1600%（雪碧图中有16张图片），并且默认是隐藏的。当雪碧图加载完成之后，div.product-sprite会被添加.loaded class类。

```html
.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元素被显示出来。

```html
.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方法来检测雪碧图是否被加载。

```html
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等事件。

```html
if( self.loaded ){
  //sprite image has been loaded
  self.element.addClass('loaded');
  self.dragImage();
  self.dragHandle();
  //..
} else {
  //...
}           
```

web299.com

jQuery和CSS3 360度产品预览特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果