图片滚轮插件-SCROLLER

Scroller为我们提供了一个遮罩成圆形图片的jquery特效，鼠标移动到某张图片上的时候放大，可以用来做图片导航菜单，可以横向排列或纵向排列

插件信息

官网：http://www.jscraft.net/plugins/scroller.html
Demo1：http://www.jscraft.net/demo/plugins/scroller/index.html
Demo2：http://www.jscraft.net/demo/plugins/scroller/demo2.html

Demo3：http://www.jscraft.net/demo/plugins/scroller/demo3.html

预览图

使用步骤

1、引入以下的js和css文件

<linkhref="css/default.css"rel="stylesheet"type="text/css">

<scriptsrc="js/jquery.js"type="text/javascript"></script>

<scriptsrc="js/jquery.easing.js"type="text/javascript"></script>

<scriptsrc="js/scroller.js"type="text/javascript"></script>

2、在head标签中加入以下js代码

$('.scroller').scroller({

    element: 'a', // (字符串) HTML 标签元素

    direction: 'horizontal', // (字符串) 可选值: horizontal, vertical

    container: {

        name: 'inside', // (string) 容器的样式名

        easing: 'easeOutBack', // (string) 动画的缓动模式，需要: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/

        duration: 800 // (int) 动画速度的毫秒数

    },

    options: {

        margin: -20, // (int) 设置每个元素的外边距

        zoom: 1.5, // (int) 放大倍数

        easing: ['easeOutBack', 'easeOutBounce'],

        duration: [300, 500]

    },

    onclick: function(a, img){},

    onmouseover: function(a, img){},

    onmouseout: function(a, img){}

});

3、在body标签中加入以下格式的html代码

<divclass="scroller">

     

    <divclass="inside">

        <ahref="#"><imgsrc="assets/img1.jpg"alt=""></a> <ahref="#"><imgsrc="assets/img2.jpg"alt=""></a> <ahref="#"><imgsrc="assets/img3.jpg"alt=""></a> <ahref="#"><imgsrc="assets/img4.jpg"alt=""></a><!-- etc. -->

    </div>

 

</div>

下载地址

官方下载：http://www.jscraft.net/files/plugins/scroller.zip
网盘下载：http://pan.baidu.com/share/link?shareid=226163&uk=2166814920