`
flex_莫冲
  • 浏览: 1092302 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

创建360旋转的jquery插件。

 
阅读更多
360旋转物体或实景的jquery插件。
http://jquery.vostrel.cz/reel

图片数据源可以有三种,第一种使用一张包含多个角度图像的图片,第2个是采用多张不同角度的图片,第三种是采用一张全景图片。

第1种数据源比较消耗内存,不需要指定图片路径,只要放在预览图片同一个目录下。命名格式为logo.png,logo-reel.png。

第2种数据源需要设置图片参数。
path:'samples/phone/',//图片保存的相对目录
images参数,
images:   phone_frames(20),自己写phone_frames()函数。参数表示使用的图片数量。也可以不传入参数。默认目录下的所有图片。
function car_frames(frames){
                var every = 1, stack = []
                for (var i = 1; i <= frames; i += every) {
                    var name = [i, '.png'].join('');
   //图片命名规则。01-36
                    if (name.length < 6)
                        name = 'car_0' + name;
else{
name = 'car_' + name;
}
console.log(name);
                    stack.push(name)
                }
                return stack
            }
也可以直接赋给数组。
images:  [ 'badge-1.gif',
             'badge-2.gif',
             'badge-3.gif',
             'badge-4.gif' ]
speed:旋转速度。0则表示一开始是停止的。
loops:是否循环。如果图片前后不是完整连接的,则设置为false。
steps:需要把一个循环切割成多少份。相当于frames
step:初始化的是哪个step
stitched:全景图片的像素宽度。
clickfree:不用点击鼠标,只要移动鼠标就能旋转。mouse leave/enter
frames:总帧数
frame:默认的帧数
footage:一个镜头移动的frames数量。垂直或水平的frames数量。若该值比较小则看起来会有跳帧的感觉,导致不流畅的效果。最大值不能超过图片总数的一半。如图片总数是20,则最大值是10
delay:5.延迟播放的秒数。
cw:顺时针方向。
inversed:反转
orbital:旋转轴心。0表示上下左右轮流旋转。
rows:Number of rows for a multi-row setup (default 0 means single-row setup).在第几行上旋转。图片如果是立体的,有多个层次,该参数设置在哪个层上旋转。总共有多少个层次看frames和图片总数。例如frames是20,图片总数是120,则rows最大是6.设置为0则表示使用所有的图片。设置为1-6,表示使用对应的20张图片。
row:rows的初始化图片。
directional:true表示两个方向。
entry:默认为speed的速度。

目前存在的问题:在ipad2上旋转图片尺寸设置为768×313相对大点的尺寸,并且放置在上下第3页以上位置。旋转时图片会出现卡位的现象。改成小尺寸就没问题。放在第一页很流畅。pc上没有此问题。
问题剖析:
1、是否由于dom查找位置比较深消耗CPU造成的?但是第一页和第N页都处于同一个层次的li啊。旋转图片时,只是改变img的src或者background-position。

——————————
更新20130118:
最近使用了1.2版本的jquery.reel.js
有几个改动:
1、images可以支持##.png格式输入,自动遍历图片目录。但是必须以01或001开始。如果图片是428之类开始的,是无效的。只会从001开始设置。也支持"image_###.jpg"的格式。
支持   images:      'drone/#####.png|1..179|5',的格式。
比如图片名是001,006,011,017...
5就表示图片序号的间隔

2、增加了unreel()函数用来释放特效
3、增加了annotations函数用来在指定图片中设置文本等内容,如添加一个div之类的。
4、orbital:     3,必须设置表示旋转的轴心数量。否则默认是上下左右旋转。若只有一个方向则不要设置这个值或设置为0。默认0.表示有几个旋转方向。如果为3,images有36张图片。则一个方向轴会有12张图片.

5、steppable 允许通过鼠标点击,每次点击显示下一帧图片
6、directional 表示是否同时支持垂直和水平两个方向。默认false
7、suffix:      '-locomotion', 设置这个属性就不需要设置images属性。默认使用当前图片animal.jpg 对应的animal-locomotion.jpg文件名作为循环图片。
8、 velocity:    1,表示初始化时的速度。比如设置为3速度就比设置为1块。播放完一遍后速度会自动恢复到speed设置的速度。
9、 timeout:20, 是指用鼠标或touch暂停了reel动画之后,经过多少秒再恢复动画。这个属性只有对speed不是0时才有效

还增加了很多功能。请查看http://jquery.vostrel.cz/reel
api参考
http://test.vostrel.cz/jquery.reel/docs/jquery.reel.html
分享到:
评论

相关推荐

    可拖动的360旋转预览jQuery插件

    本篇文章将深入探讨“可拖动的360旋转预览jQuery插件”,它提供了独特的视觉体验,让用户体验产品的全方位视图。 标题中的“360旋转”是指一种在线展示技术,允许用户通过鼠标或触摸操作来查看对象的各个角度,仿佛...

    jquery 360度旋转插件

    《jQuery 360度旋转插件:elbeanio-jquery.tagsphere深度解析》 在网页设计和开发中,动态视觉效果常常能提升用户体验,其中360度旋转展示是常见的一种手法。jQuery,作为一款轻量级、功能强大的JavaScript库,提供...

    实用的产品图片360度旋转jQuery插件

    tikslus360是一款基于HTML5 canvas的非常实用的产品图片360度旋转jQuery插件。该图片360度旋转插件可以将一系列不同角度的图片组成一个序列俩通过鼠标或自动连续播放,完成产品的预览效果。它通过点击拖拽还能有局部...

    360全景jquery插件

    【360全景jQuery插件】是一种用于网页中展示全景观看效果的JavaScript库,它基于流行的jQuery框架,为用户提供了一种便捷的方式来创建交互式的360度全景体验。jQuery库以其简洁的API和强大的功能著称,使得开发人员...

    jquery 360度旋转插件Rollerblade

    《jQuery 360度旋转插件Rollerblade深度解析》 在当今的网页设计中,用户体验已经成为衡量网站质量的重要标准之一。为了提升用户对产品的感知和互动性,360度旋转展示技术应运而生。jQuery作为一款强大的JavaScript...

    jQuery产品图片360度旋转插件.zip

    jQuery提供了`animate()`函数,用于创建复杂的动画效果,这在构建360度旋转插件时非常有用。 3. **用户交互**:插件应支持用户通过鼠标拖动或触摸事件来控制旋转速度和方向。这需要对鼠标和触摸事件进行监听,并...

    一款360度鼠标拖拽旋转插件 jquery 三维旋转特效.rar

    为了便于使用,开发者通常会将这些功能封装成一个jQuery插件,用户只需要在页面中引入jQuery库和插件文件,然后通过简单的jQuery选择器和方法调用来激活旋转效果。例如,可能的使用方式如下: ```javascript $...

    360度旋转图片展示插件

    在提供的文件列表中,“360度旋转图片展示jquery插件UIMIX.fullview”很可能是一个完整的解决方案,它利用jQuery库来创建交互式的360度图片展示效果。jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理...

    360°三维视图jquery插件

    【360°三维视图jquery插件】是一种利用JavaScript库jQuery实现的交互式图像展示技术,它允许用户从各个角度查看图像,创造出类似于实物360度旋转的效果,广泛应用于产品展示、虚拟现实和增强现实场景。这种特效在...

    jquery图片旋转插件制作触屏手机360度旋转图片展示

    360度旋转图片展示jquery插件UIMIX.fullview是一款功能非常强大的图片360度旋转特效,是浏览VIVO智能手机官方网站时整理出来的,使用的时候只要准备好要展示的图片和设置好参数就好,image_count是图片的数量,除了...

    基于jquery Circlr 360度3D旋转插件

    **jQuery Circlr 360度3D旋转插件** jQuery Circlr插件是一个强大的工具,专为网页设计师和开发者设计,它允许用户在网页上实现360度的3D旋转展示效果,尤其适用于产品展示,如服装、家具等需要多角度查看的商品。...

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

    这是一款非常实用的可以对产品图片进行360度全方位旋转展示的jQuery插件。该插件通过使用不同角度的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。该插件非常适合于商品的展示。

    jquery 360度旋转插件UIMIX.fullview

    **jQuery 360度旋转插件UIMIX.fullview详解** jQuery 360度旋转插件UIMIX.fullview是一款专为网页设计而开发的交互式展示工具,它能够让用户以360度视角查看对象,为产品展示、图片预览等场景提供了丰富的动态效果...

    jQuery图片360度旋转 可跟随鼠标旋转

    今天我们要再来介绍一款基于jQuery的360度图片旋转插件,这款jQuery图片旋转插件的原来和之前分享的类似,也是通过多张图片叠加播放实现的,通过jQuery实现方法也很简单。回顾之前分享的另外几款图片旋转插件:...

    jquery 图片360度旋转

    在网页设计中,为了增强用户体验,常常需要实现图片的360...通过以上步骤,你可以创建一个简单的jQuery图片360度旋转效果。当然,实际项目中可能还需要考虑兼容性、性能优化等问题,这需要结合具体需求进行调整和优化。

    jquery rotate图片旋转插件制作转盘360度旋转抽奖代码.zip

    总之,利用jQuery和jQuery Rotate插件,我们可以轻松创建一个360度旋转的抽奖转盘,提供吸引人的用户体验。这个过程中,理解jQuery的基本操作和Rotate插件的使用是至关重要的。通过合理的布局、事件绑定和动画设置,...

    jQuery图片360度旋转插件spritespin.zip

    jQuery图片360度旋转插件spritespin是一个强大的JavaScript库,专为网页设计者和开发者提供了在网页上实现高互动性的360度图像旋转功能。这个插件利用了jQuery框架的强大性能,使得图片旋转效果既流畅又稳定,极大地...

    jQuery产品图片360度旋转动画 可设定旋转参数

    这次我们要来分享一款基于jQuery的图片旋转插件,我们只要拖拽鼠标即可将图片水平进行旋转,另外,如果鼠标在图片上方,也支持鼠标滚轮来旋转图片。同时,我们可以对旋转的一些参数进行自定义控制,具体可以在DEMO上...

    jQuery旋转插件—rotate

    **jQuery旋转插件—rotate** 在网页开发中,有时候我们需要实现元素的动态旋转效果,比如在展示3D产品、制作动画或设计交互时。jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理和动画等功能。而...

Global site tag (gtag.js) - Google Analytics