注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery图片360度旋转插件Rollerblade

动画 fishcity 2534浏览

jquery图片360度旋转插件Rollerblade

Rollerblade是一款基于jquery的图片360度旋转的插件,使用简单,只需调用一个方法,配置几个参数就可以实现体验性非常强的360度旋转功能。当然插件不限于只做360度旋转,它可实现你任何你想象得到的转动效,更深一步的研究,请移步到官方果看文档。

使用方法

引入核心文件

<link rel="stylesheet" href="rollerblade.css">
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="rollerblade.min.js"></script>

写上html代码

<div id="target">
   <img class="rollerblade-img" src="path/to/first/image.jpg">
</div>

初始化插件

    // 你可以事先定义好图片的数组(注意图片的顺序),然后以参数传给rolerblade方法来初始化

    var arrayOfImages = [
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ];

    $("#target").rollerblade({imageArray:arrayOfImages});    
    
    // 也可以使用iamgeArray参数来定义数组

    $("#target").rollerblade({imageArray:[
        'path/to/image/1.jpg',
        'path/to/image/2.jpg',
        'path/to/image/3.jpg',
        'path/to/image/4.jpg',
        'and/so/on.jpg'
    ]});

选项

 // Defaults.
    $("#target").rollerblade({
        imageArray: [yourArray],
        sensitivity: 35,//整数型,概据用户鼠标的敏感度来实现旋转
        drag: true, //是否激活拖拽
        auto: false //是否自动旋转,默认为false
    });

转载请注明:jQ酷 » jquery图片360度旋转插件Rollerblade

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。