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的整数值 | 淡入淡出效果的时间间隔,单位毫秒 |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!