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

jQuery产品图片360度旋转预览插件

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

简介

该产品图片旋转插件首先要引入jQuery和circlr.js文件。

```html
<script src='js/jquery.js'></script>                
<script src='js/circlr.js'></script>     
```           
然后在你想要放置图片展示的元素上调用该插件：

- var crl = circlr(element, options);                
- element：放置图片的容器元素的ID。
- options：参数对象。
#####  配置参数
下面是该图片360度旋转插件的可用参数：

- mouse：是否通过鼠标进行图片旋转，默认值为true。
- scroll：是否通过scroll进行图片旋转，默认值为false。
- vertical：是否在垂直方向上移动鼠标时旋转图片，默认值为false。
- reverse：是否反转方向，默认值为false。
- cycle：是否循环旋转图片，默认值为true。
- start：开始动画帧，默认值为0。
- speed：动画帧通过circlr.turn(i)切换的速度，默认值为50毫秒。
- autoplay：是否自动进行图片360度旋转播放，默认值为false。
- playSpeed：动画序列的播放速度，默认值为100毫秒。
- loader：预加载DOM元素的ID。
- ready：图片加载完成后的回调函数。
- change：动画帧改编之后的回调函数（以当前帧和总帧数为参数）。
#####  方法
下面是该图片360度旋转插件的可用方法：

- crl.el：返回对象的DOM元素节点。
- crl.length：返回对象的总的动画帧数。
- crl.turn(i)：动画旋转到第i帧。
- crl.go(i)：动画跳转到第i帧。
- crl.play()：开始动画序列的播放。
- crl.stop()：停止动画播放。
- crl.hide()：隐藏对象的DOM元素节点。
- crl.show()：显示对象的DOM元素节点。
- crl.set(options)：在插件初始化之后改变对象的参数：
- vertical
- reverse
- cycle
- speed
- playSpeed
#####  浏览器兼容
- Internet Explorer 7+
- Chrome
- Safari
- Firefox
- Opera

web299.com

jQuery产品图片360度旋转预览插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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