图片滚轮插件-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文件

< link href = "css/default.css" rel = "stylesheet" type = "text/css" >
< script src = "js/jquery.js" type = "text/javascript" ></ script >
< script src = "js/jquery.easing.js" type = "text/javascript" ></ script >
< script src = "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代码

< div class = "scroller" >

    < div class = "inside" >
        < a href = "#" >< img src = "assets/img1.jpg" alt = "" ></ a > < a href = "#" >< img src = "assets/img2.jpg" alt = "" ></ a > < a href = "#" >< img src = "assets/img3.jpg" alt = "" ></ a > < a href = "#" >< img src = "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