创建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
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
类似资料：