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

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

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

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

简介

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

```html
<script src="js/pdt360DegViewer.js"></script>
```              
#####  HTML结构
使用一个div元素作为旋转产品图片的容器。

```html
<divid="product_id"></div>
```
#####  CSS样式
添加下面的CSS样式。
```html

#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度图片旋转预览插件。

```html
var path = './img/';
pdt360DegViewer('product_id', 51, './img/', 'png', true, true, false, false, false, false, false);
```
#####  配置参数
在初始化是，传入pdt360DegViewer()中的参数分别代表：

```html
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：|是否允许通过鼠标滚轮来控制旋转。|

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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