360度图片旋转产品预览展示js插件

PetitQ 图片/图形 2018-11-18 2.74K 0 0

这是一款 360 度图片旋转产品预览展示 js 插件。该 360 度图片旋转产品预览 js 插件提供多种控制产品图片旋转的方法，包括自动旋转，通过按钮来控制旋转，通过鼠标拖拽或鼠标移动来控制旋转，通过鼠标滚轮来控制旋转等。

使用方法

在页面中引入 pdt360DegViewer.js 文件。

也想出现在这里？联系我们吧

<script src="js/pdt360DegViewer.js"></script>

HTML 结构

使用一个<div>元素作为旋转产品图片的容器。

```
<div id="product_id"></div>
```

CSS 样式

添加下面的 CSS 样式。

```
#pdtViewer.container {
```
```
  width: 67%;
```
```
  height: 450px;
```
```
  margin: 0 auto;
```
```
  border: 0.5px solid #eee;
```
```
}
```
```
 
```
```
#pdtViewer img { padding: 40px 20px; }
```
```
 @media screen and (max-width:1250px) {
```
```
 
```
```
#pdtViewer img { width: 100%; }
```
```
}
```
```
 
```
```
#pdtViewer .nxt { left: 85%; }
```
```
 
```
```
#pdtViewer .prev { left: 12%; }
```
```
 
```
```
#pdtViewer button {
```
```
  position: absolute;
```
```
  top: 57%;
```
```
  background: none;
```
```
  border-radius: 30px;
```
```
  padding: 0;
```
```
  font-weight: bold;
```
```
  font-size: 30px;
```
```
  width: 50px;
```
```
  cursor: pointer;
```
```
  height: 52px;
```
```
  box-shadow: 0 6px 15px #aaa;
```
```
}
```
```
 
```
```
#pdtViewer button:focus { outline: 0; }
```
```
 
```
```
#dummy { display: none; }
```
```
 
```
```
#loader {
```
```
  width: 67%;
```
```
  height: 450px;
```
```
  position: absolute;
```
```
  background: rgba(0,0,0,0.5);
```
```
}
```
```
 
```
```
.three-bounce {
```
```
  text-align: center;
```
```
  font-size: 26px;
```
```
  position: absolute;
```
```
  top: 50%;
```
```
  left: 50%;
```
```
}
```
```
 
```
```
.three-bounce div {
```
```
  display: inline-block;
```
```
  width: 18px;
```
```
  height: 18px;
```
```
  border-radius: 100%;
```
```
  background-color: #fff;
```

  -webkit-animation: bouncedelay 1.4s infinite ease-in-out both;

  animation: bouncedelay 1.4s infinite ease-in-out both;

```
}
```
```
 
```
```
.three-bounce .one {
```
```
  -webkit-animation-delay: -0.32s;
```
```
  animation-delay: -0.32s;
```
```
}
```
```
 
```
```
.three-bounce .two {
```
```
  -webkit-animation-delay: -0.16s;
```
```
  animation-delay: -0.16s;
```
```
}
```
```
 @keyframes 
```
```
bouncedelay {  0%, 80%, 100% {
```
```
 -webkit-transform: scale(0);
```
```
 transform: scale(0);
```
```
}
```
```
 40% {
```
```
 transform: scale(1);
```
```
 -webkit-transform: scale(1);
```
```
}
```
```
}
```

初始化插件

然后通过下面的方法来初始化该 360 度图片旋转预览插件。

```
var path = './img/';
```

pdt360DegViewer('product_id', 51, './img/', 'png', true, true, false, false, false, false, false);

配置参数

在初始化是，传入 pdt360DegViewer()中的参数分别代表：

pdt360DegViewer(imgDivid, count, path, imgType, playable, autoPlay,

                  drag, mouseMove, buttonNavigation, keyNavigation, scroll);

imgDivid：容器的 ID

count：产品图片的数量

path：产品图片存放的路径

imgType：产品图片的类型，如'png', 'jpg', 'gif'等

playable：是否允许控制旋转

autoPlay：是否自动旋转

drag：是否允许通过鼠标拖拽来控制旋转

mouseMove：是否允许通过鼠标移动来控制旋转

buttonNavigation：是否显示前后导航按钮

keyNavigation：是否允许通过键盘方向键来控制旋转

scroll：是否允许通过鼠标滚轮来控制旋转
Github 地址：https://github.com/Jeya-Prakash/3D-Product-Viewer-JavaScript-Plugin

360 度图片旋转产品预览展示 js 插件

已有 685 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

图片/图形

360度图片旋转产品预览展示js插件

使用方法

HTML 结构

CSS 样式

初始化插件

配置参数

360 度图片旋转产品预览展示 js 插件

相关文章

jQuery图片滑动切换效果

jfMagnify 放大任何HTML元素jQuery放大镜插件

CSS3+SVG模糊背景透明遮罩动画特效

发表回复取消回复

热销模板

图片/图形

使用方法

HTML 结构

CSS 样式

初始化插件

配置参数

360 度图片旋转产品预览展示 js 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复