jQuery overScroll插件

by Slobodan Jovanovic

这是一个CSS3的苹果的CoverFlow的设计模式的变体

用法

1. HTML

   <div id="container">
   	<img src="img1.jpg" />
   	<img src="img2.jpg" />
   	<img src="img3.jpg" />
   	<img src="img4.jpg" />
   </div>
   

2. JavaScript

   $('#container').coverscroll();
   			

   OR

   $('#container').coverscroll({items:'img'});
   			

选项

这是默认的选项：

var opt = {
	'minfactor':20, // 下一个项目是多少比以前的以像素为单位
	'distribution':1.5, // 如何分开的项目（项目走散当该值低于1）
	'scalethreshold':0, // 多少个项目后，开始缩放
	'staticbelowthreshold':false, // 如果为true时，件数下面的“scalethreshold”， - 不动画
	'titleclass':'itemTitle', // 类名的元素包含的项目标题
	'selectedclass':'selectedItem', // 所选项目的类名
	'scrollactive':true, // 滚动功能开关
	'step':{ // 压缩步骤
	'limit':4, // 多少步上应显示的每一侧
	'width':8, // 工序（以像素为单位）的可见部分有多宽
	'scale':true // 缩减步骤
	},
	'bendamount':2, // “弯曲”的CoverScroll（值0.1至1弯下腰，-0.1至-1弯，2的量是直（没有弯曲），1.5 sligtly弯下腰）
	'movecallback':function(item){} // 回调函数触发后单击一个项目 - 参数是该项目的jQuery对象
};
	

方法

这是一种支持的方法列表:

1. next - 移动到下一个项目
   

   $('#container').coverscroll('next');
   			

2. prev - 移动到上一个项目
   

   $('#container').coverscroll('prev');
   			

实例

$('#container').coverscroll();
	

更复杂的例子（shelf）

HTML

<div id="shelf">
	<div id="container">
		<div class="item">
			<img style="width:100%,height:100%" src="image.jpg" />
			<div class="itemTitle">the title 1</div>
		</div>
		<!--其他项目-->
	</div>
</div>
	

JavaScript

$('#container').coverscroll({
	items:'.item', 
	minfactor:10, 
	scalethreshold:5, 
	staticbelowthreshold:true, 
	distribution:1, 
	bendamount:1.5, 
	movecallback:getStatus
});
	

上一个    下一个

Add Item

添加项目展示了如何overScroll不同的行为时，有超过5项中的“.