图片/图形
全景产品图片360度旋转展示jQuery插件
PetitQ
tikslus360 是一款基于 HTML5 canvas 的非常实用的产品图片 360 度旋转 jQuery 插件。该图片 360 度旋转插件可以将一系列不同角度的图片组成一个序列俩通过鼠标或自动连续播放，完成产品的预览效果。它通过点击拖拽还能有局部放大镜的效果。使用该插件需要注意以下几点要求：
图片的命名必须是数字递增的方式，如：1.png，2.png，3.png 等等
也想出现在这里？联系我们吧
这些图片要放置在一个文件夹中，文件夹的路径要在插件中指定
要使图片自动旋转，可以为链接添加 autorotate class
使用方法
使用该 360 度旋转插件需要引入 jQuery，tikslus360.js 和 tikslus360.css 文件。
<link href="/css/tikslus360.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/tikslus360.min.js"></script>
HTML 结构
使用一个带 ID 的<div>做容器。要使图片自动旋转，可以添加一个<a>元素，并为它设置 class 为 autorotate。
<div id="view360">
<a href="#" class="autorotate">Auto rotate</a>
</div>
初始化插件
在页面加载完毕之后，可以通过下面的方法来初始化该 360 度旋转插件。
$(document).ready(function(){
$("#view360").tikslus360({
imageDir:'images',
imageCount:36,
imageExt:'jpg',
canvasID:'canvas1',
canvasWidth:640,
canvasHeight:480
});
});
注意，在初始化插件的时候，必须提供下面的参数：
imageDir
imageCount
imageExt
canvasID
canvasWidth
canvasHeight
配置参数
| 参数 | 默认值 | 允许值 | 描述 |
| imageDir | images | 有效的文件名称 | 定义图片放置文件夹的路径 |
| imageCount | 0 | 任何大于 0 的整数 | 用于 360 度旋转的图片的数量 |
| imageExt | jpg | jpg,png,bmp | 图片格式的后缀，所有图片的格式必须相同 |
| canvasID | blank | 有效的 HTML ID | canvas 的 ID |
| canvasWidth | 0 | 大于 0 的整数值 | canvas 的宽度 |
| canvasHeight | 0 | 大于 0 的整数值 | canvas 的高度 |
| zoomPower | 2 | 大于 0 小于 10 的整数值 | 图片缩放的级别 |
| zoomRadius | 100 | 大于 0 的整数值 | 缩放的半径 |
| autoRotate | false | true 或 false | 是否自动 360 度旋转 |
| autoRotateInterval | 100 | 大于 50 的整数值 | 旋转的时间间隔，单位毫秒 |
| fadeInInterval | 400 | 大于 50 的整数值 | 淡入淡出效果的时间间隔，单位毫秒 |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
