基于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 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
javascript中clone对象详解
Dec 03 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
AngularJS  自定义指令详解及实例代码
Sep 14 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
MySQL相关说明
2007/01/15 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php字符串截取函数用法分析
2014/11/25 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
IE6/7/8中Option元素未设value时Select将获取空字符串
2011/04/07 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
gulp教程_从入门到项目中快速上手使用方法
2017/09/14 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
python生成圆形图片的方法
2020/03/25 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python读取Excel表格文件的方法
2019/09/02 Python
python通过cython加密代码
2020/12/11 Python
想学画画?python满足你!
2020/12/24 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
大学生会计职业生涯规划范文
2014/02/28 职场文书
夫妻吵架保证书
2015/05/08 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers