360度3D 旋转插件
Circlr
插件是一款基于jQuery
的可以对图片进行360度全方位旋转展示的插件。Circlr
通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade
,动画顺畅,也更易于控制,非常适合于商品的展示。
特点
1. 支持水平或垂直方向旋转。
2. 支持移动触摸事件。
3. 支持滚动事件。
4. 图片预加载处理。
5. 可以反向和循环旋转图片。
代码基本使用
使用方法:
1. 引用js文件包
<script src="js/jquery.min.js"></script>
<script src="js/circlr.min.js"></script>
2.书写结构:
<div class="container">
<div id="circlr">
<img data-src="picture/1.png" />
<img data-src="picture/2.png" />
<img data-src="picture/3.png" />
... // 这里放入所需图片即可, 图片太多可用js动态添加
<div id="loader"></div>
</div>
</div>
注意, 是 自定义属性 data-src
里面写路径 2. loader
是 加载项
图片太多了可以用js动态添加
<div class="container">
<div id="circlr">
<div id="loader"></div>
</div>
<script>
// 需要准备 74个图片
for (var i = 1; i <= 74; i++) {
// 创建图片 别忘更换属性
var img = $("<img data-src='images/" + i + ".png'/>");
// 追加到 circlr里面
$("#circlr").append(img);// prepend 内部的前面添加 append 内部的后面添加
}
</script>
</div>
3. 书写css
#circlr {
cursor: move;
margin: 0 auto;
min-height: 100px;
position: relative;
}
#circlr #loader {
background: url(../images/loader.gif) center center no-repeat;
bottom: 0;
display: none;
left: 0;
position: absolute;
right: 0;
top: 0;
}
4.调用文件对象
<script type="text/javascript">
var crl = circlr('circlr', {
scroll : true,
loader : 'loader'
});
</script>
参数和方法
参数
参数名 | 说明 |
---|---|
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 |
相关代码资源
码云
3d旋转car
微云
3d旋转car
参考
基于jquery Circlr插件实现360度3D旋转 商品展示案例
360度3D 旋转插件的更多相关文章
- jQuery Panorama Viewer – 360度全景展示插件
jQuery Panorama Viewer 这款插件可以帮助你在网站中嵌入全景图片.要做到这一点,首先只需要在页面中引入最新的 jQuery 库,以及 jquery.panorama_viewer. ...
- html5人物图片360度立体旋转
体验效果:http://hovertree.com/texiao/html5/10.htm 下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm 代码如下: ...
- js实现360度图片旋转
▓▓▓▓▓▓ 大致介绍 这次是一个简单的效果,就是思路的问题 效果: ▓▓▓▓▓▓ 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动 ...
- HTML实现图片360度循环旋转
<style> .header{ -webkit-animation:rotateImg 5s linear infinite;<!--修改旋转周期--> border: 1p ...
- jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果
http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880
- 13 款最棒的 jQuery 图像 360° 旋转插件
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...
- C# 图片旋转360度程序
这几天开发一个程序,需要将一个图片旋转360度然后每一个角度保存下来.刚开始本来想着是让美工弄的,但是让一个美工手动转360度,她会喷你一脸. using System; using System.C ...
- css3 向上淡入 小图标翻转 360度旋转
代码 <!DOCTYPE HTML> <html> <style type="text/css"> div { border: 1px soli ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
随机推荐
- AngularJS基础语法
1.ng-app 决定了angularjs的作用域范围,你可以如下使用: <html ng-app> … </html> 来让angularjs渲染整个页面,也可以使用 < ...
- TTTTTTTTTTTT POJ 2112 奶牛与机器 多重二分匹配 跑最大流 建图很经典!!
Optimal Milking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 15682 Accepted: 5597 ...
- Spark指标项监控
监控配置 spark的监控主要分为Master.Worker.driver.executor监控.Master和Worker的监控在spark集群运行时即可监控,Driver和Excutor的监控需要 ...
- 分布式-网络通信-NIO
目录:一.java NIO 和阻塞I/O的区别 1. 阻塞I/O通信模型 2. java NIO原理及通信模型二.java NIO服务端和客户端代码实现 一.java NIO 和阻塞I ...
- 【每日一包0012】to-camel-case,to-no-case,to-space-case
github地址:https://github.com/ABCDdouyaer/a_pack_per_day_NO.1 to-camel-case 将被其他符号分割的字符串转换为驼峰形式的字符串 用法 ...
- gulp自动化构建工具安装使用(1)
我用的是windows,所以以下操作针对于windows用户,其他系统有不一样的地方请自行查阅资料更正. 好了,废话少说,反正也就是随手捣腾.下雨了,天晴了,我们开始搞gulp了 安装:gulp是个构 ...
- SQL 表 数据备份
insert into SMTTemporarySave select * from [MSV0CIMDB].[PICS_20170706].dbo.SMTTemporarySave
- laravel中事件的监听和订阅
一.前言 更新员工部门主管的时候,需要重新更新一下缓存,这个会比较耗时.所以计划放到队列中来执行.后来想了想,其实用一下事件监听也能实现.人家都说好,然是我也没感觉到有什么好的. 二.正文 1. 在p ...
- Windows监控——性能指标详解(转)
http://blog.csdn.net/yiqin3399/article/details/51730106
- Selenium 2自动化测试实战10(鼠标事件)
一.鼠标事件 1. webdriver中,关于鼠标操作的方法封装在ActionChains类中 ActionChains类提供了鼠标操作的常用方法: perform:执行所有ActionChains中 ...