jquery.reel.js 360°旋转方法使用详解

jquery reel 源码地址： http://code.vostrel.cz/jquery.reel.js

主要功能：360°图片旋转，长图片横拉，静态图片做成动态，伪动图效果

参考案例：https://github.com/pisi/Reel 直接在github上下载，可以打开example文件内，查找适合自己的例子，进行改造。

使用方法：

首先要引入css js 文件,因为jquery.reel是基于jquery进行使用的，所以也要先引用jquery文件。

触发效果的方式有两种：行内使用或js生成使用

example：

1 行内使用:

<img src="imgage1.jpg" alt="" id="my_image" data-images="imgage1.jpg" data-loop="false">

2 js生成使用:

        <img src="imgage1.jpg" alt="" id="my_image">
        <script>
            $("#my_image").reel({
                image:"imgage1.jpg",
                loop:false
            })
        </script>

主要使用的属性：

frame(从第几帧开始),
frames(总共有几帧),
image(使用单个长图),
images(使用组图),
throwable(是否超出屏幕仍然可以拖拽),
footage(每行(水平时)或每列(垂直时)的帧数),
responsive(如果切换到响应模式,Reel将会遵从父容器的尺寸,并根据需要调整交互和UI(也会调整大小))
还有其他属性等等,就不做介绍,详情请看此链接，有介绍方法。http://jquery.vostrel.cz/reel

annotation方法：使用此方法可以在图片旋转的时候，增添提示出现在指定的位置和帧数。
添加标签：

        <div class="reel-annotation" id="link_to_producer1" data-start="2" data-end="5" data-x="1,2,3,4,5"
        data-y="463,476,470,465" data-for="spin__image-reel">
            <a href="">Tip 提示信息</a>
        </div>

data-start:从第几帧开始
data-end:从第几帧结束
data-x:出现时横坐标的位置
data-Y:出现时纵坐标的位置
data-for:对应的是标签的id值

注意 注意 注意： 添加多个提示信息的时候，需要设置不同的ID值。如

    <div class="reel-annotation" id="reel-img1"></div>
    <div class="reel-annotation" id="reel-img2"></div>

reel的methods方法：

方法1： 获取值: .reel(“frame”)

方法2： 设置值：.reel(‘frame’, 2)

方法3： Changes方法

eg:

    <script>
        .bind('frameChange', function(a, b, c){
           console.log(c); //c为frame的值
            
        })
    </script>
    <script>
        .bind('reelingChange', function(evnt, nothing, reeling){
            if (reeling){
                 console.log('Rock & reel!')
            } else {
                console.log('Not reeling...')
            } 
            
        })
    </script>