多语言展示
当前在线:1231今日阅读:23今日分享:25

产品图片360度旋转jQuery插件tikslus360攻略

tikslus360是一款基于HTML5 canvas的非常实用的产品图片360度旋转jQuery插件。该图片360度旋转插件可以将一系列不同角度的图片组成一个序列俩通过鼠标或自动连续播放,完成产品的预览效果。它通过点击拖拽还能有局部放大镜的效果。      使用该插件需要注意以下几点要求:     (1)图片的命名必须是数字递增的方式,如:1.png,2.png,3.png等等。     (2)这些图片要放置在一个文件夹中,文件夹的路径要在插件中指定。     (3)要使图片自动旋转,可以为链接添加autorotate class。
工具/原料
1

笔记本电脑或是台式机

2

互联网

3

jQuery

4

tikslus360插件

方法/步骤
1

使用该360度旋转插件需要引入jQuery,tikslus360.js和tikslus360.css文件。

2

使用一个带ID的

做容器。要使图片自动旋转,可以添加一个元素,并为它设置class 为autorotate。

3

在页面加载完毕之后,可以通过下面的方法来初始化该360度旋转插件。

4

注意,在初始化插件的时候,必须提供下面的参数:imageDirimageCountimageExtcanvasIDcanvasWidthcanvasHeight

5

案例完整HTML代码如下图所示:

6

案例Javascript代码如下图所示:

7

本插件运行效果如下图所示:

8

本插件浏览器兼容性如下图所示:

注意事项

本插件依赖于JQuery插件

推荐信息