基于jQuery Circlr插件实现产品图片360度旋转


Posted in Javascript onSeptember 20, 2015

基于jQuery Circlr插件实现产品图片360度旋转

Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示。

它的特点有:

支持水平或垂直方向旋转。

支持移动触摸事件。

支持滚动事件。

图片预加载处理。

可以反向和循环旋转图片。

jQ酷实例教程:jQuery产品图片360度旋转Circlr

引入核心文件

<script src='js/jquery.js'></script>  
<script src='js/circlr.js'></script>

建立html,只需建立一个放置图片的DIV容器,当然还可以加入一个加载的DIV提高体验性。

<div id="circlr">
 <img data-src="picture/00.jpg">
 <img data-src="picture/01.jpg">
 <img data-src="picture/02.jpg">
 <img data-src="picture/03.jpg">
 <img data-src="picture/04.jpg">
 <img data-src="picture/05.jpg">
 <img data-src="picture/06.jpg">
 <img data-src="picture/07.jpg">
 <img data-src="picture/08.jpg">
 <img data-src="picture/09.jpg">
 <img data-src="picture/10.jpg">
 <img data-src="picture/11.jpg">
 <img data-src="picture/12.jpg">
 <img data-src="picture/13.jpg">
 <img data-src="picture/14.jpg">
 <img data-src="picture/15.jpg">
 <div id="loader"></div>
</div>

写入JS,初始化插件

var crl = circlr(element, options); //调用方法
//element:放置图片的容器元素的ID。
//options:参数对象。 
//实例
 var crl = circlr('circlr', {
  scroll : true,
  loader : 'loader'
 });

参数

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:动画帧改编之后的回调函数(以当前帧和总帧数为参数)。

方法

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

以上内容是本文给大家介绍的基于jQuery Circlr插件实现产品图片360度旋转,希望大家喜欢。

Javascript 相关文章推荐
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
JS通过位运算实现权限加解密
Aug 14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
在vue中使用console.log无效的解决
Aug 09 Javascript
js不常见操作运算符总结
Nov 20 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 #Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 #Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
You might like
PHP XML操作类DOMDocument
2009/12/16 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
js单词形式的运算符
2014/05/06 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
2020/06/11 Javascript
Python守护线程用法实例
2017/06/23 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Python对象转换为json的方法步骤
2019/04/25 Python
int在python中的含义以及用法
2019/06/27 Python
Python configparser模块常用方法解析
2020/05/22 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
施工材料员岗位职责
2014/02/12 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
二手房购房意向书范本
2014/04/01 职场文书
医德医风自我评价
2014/09/19 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python