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的整数值 淡入淡出效果的时间间隔,单位毫秒