基于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度旋转,希望大家喜欢。

(0)

相关推荐

  • jQuery制作图片旋转效果

    以前用JQuery写过一个纵深方向上的图片旋转效果,在这里拿出来跟大家分享下,贴上一张图片看看效果是如何的: 其实现原理并不复杂,在数学上只用到了其中的正弦函数,制作过程大致如下: (1)先定义好图片旋转的半径 (2)图片旋转的过程需要用到setInterval()方法,来获取每一张图片所在位置的的角度,角度会根据时间变化逐渐变化 (3)根据一个数学公式:x=R*SIN(deg)可以获得图片在X方向的位置 (4)透明度的设置其实也是根据图片旋转时候的角度来定的.初始设置图片在正前方时是0度,无论

  • jquery 圆形旋转图片滚动切换效果

    这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用. PS: 经过修改已经兼容大众浏览器.效果图:在线演示:http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建HTML 复制代码 代码如下: <div id="rotatescroll"> <div class="viewport"> <ul class="overview&

  • jQuery实现可以控制图片旋转角度效果(附demo源码下载)

    本文实例讲述了jQuery实现可以控制图片旋转角度效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww

  • jquery实现LED广告牌旋转系统图片切换效果代码分享

    本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下: js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果. LED广告显示器上图片切换效果,场景也类似,效果相当震撼看得我目瞪口呆,热爱特效的你可不要错过哈! 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery实现LED广告牌旋转

  • jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

    本文实例讲述了jQuery图片旋转插件jQueryRotate.js用法.分享给大家供大家参考,具体如下: 推荐一个图片旋转插件,用于浏览相册时,旋转图片. 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <script type="text/javascript"> $(document).ready(function () { $("#images").rotate(45); var value = 0 $("#images

  • 让图片旋转任意角度及JQuery插件使用介绍

    引入下方的jquery.rotate.js文件,然后通过$("选择器").rotate(角度);可以旋转任意角度, 例如$("#rotate-image").rotate(45);把这句放在$(document).ready(function(){ });中 就是将id为rotate-image的图片旋转45度. 不过,貌似在Chrome中总是不显示. 唉,找了两个小时,才发现Chrome太坑爹了,没法获取图片的长宽. 解决办法是,把$("#rotate-

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

    Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr

  • jQuery实现的产品自动360度旋转展示特效源码分享

    这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i

  • 基于jQuery仿淘宝产品图片放大镜代码分享

    这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="

  • 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54  320X320  800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c

  • js实现图片360度旋转

    大致介绍 这次是一个简单的效果,就是思路的问题 效果: 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动距离来操作的,即移动的像素值.如果按照默认的情况,移动鼠标的时候图片就旋转的太快了,所以我们要给鼠标移动的距离处以15,降低图片的旋转速度. var l = parseInt(-x/15); 有一个问题是在鼠标向左移动的时候,移动的距离是负的.要想正确的显示图片,就要对负值进行处理.例如-1,图片要显示最后一张即72张(图片一

  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏. 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示.希望大家能从中找到自己喜欢的,并应用在自己的网站上. 1

  • 基于jQuery实现响应式圆形图片轮播特效

    本文实例讲述了基于jQuery实现响应式圆形图片轮播特效代码.分享给大家供大家参考.具体如下: 运行效果截图如下: mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件,mislider轮播图插件的特点有: 使用简单 在同一个屏幕中支持多个轮播图 轮播图的内容可以是单张图片或复杂的HTML内容 轻量级 响应式设计 非常容易定制 丰富的回调函数 跨浏览器,支持IE8+浏览器 引入核心文件 mislider插依赖于一些插件,在引入之前要先引入jQuery.html5shiv.j

  • 基于jquery fly插件实现加入购物车抛物线动画效果

    先给大家展示下效果图: 在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jquery fly插件实现加入购物车抛物线动画效果. 使用jquery.fly插件很方便时实现抛物线动画加入购物车的功能 一.插件下载 插件官方:https://github.com/amibug/fly 二.载入jQuery库文件和jquery.fly.min.js插件 <scr

  • 基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下 在线演示 源码下载 实现的代码: <div class="dowebok"> <h2> 1.默认</h2> <div class="inner"> <span id="tip1" data-tipso

随机推荐