图片滚轮插件-SCROLLER

 查看演示  website  立即下载

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

使用步骤

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="#"><imgsrc="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>

PREVIOUS:
NEXT:
网页颜色选择插件-COLORPICKER
界面通告对话框-BACKBONE.NOTIFIER