jQuery滚动插件–Xslider(支持水平滚动和垂直滚动)

2014-08-12阅读(6581)评论(0)牵着狗狗看MM

苏州实时公交查询

最近项目需要用到滚动效果,发现这款插件很不错,支持功能比较强大,完全能满足滚动需求,不管是图片滚动还是文字滚动
写滚动效果的html结构可能大都是用li列表,滚动时一般是通过li的个数来指定移动距离,Xslider打破这种思维局限,任何一个对象在这里都能实现滚动效果,而不仅是li列表!为什么?插件的思想是把移动对象网格化看待,通过判断可视框宽度、要移动对象的宽度及它当前的位置(获取left或top值)来控制滚动,所以你只需指定可视框宽度、要移动对象的宽度以及每次要移动的单位网格数,不管你的html结构是li的列表还是纯文本字段,都能实现滚动的效果。

参数说明

$(".productshow").xslider({//.productshow是要移动对象的外框;
		unitdisplayed:3,//可视的单位个数   必需项;
		movelength:1,//要移动的单位个数    必需项;
		maxlength:null,//可视宽度或高度    默认查找要移动对象外层的宽或高度;
		scrollobj:null,//要移动的对象     默认查找productshow下的ul;
		unitlen:null,//移动的单位宽或高度     默认查找li的尺寸;
		nowlength:null,//移动最长宽或高(要移动对象的宽度或高度)   默认由li个数乘以unitlen所得的积;
		dir:"H",//水平移动还是垂直移动,默认H为水平移动,传入V或其他字符则表示垂直移动;
		autoscroll:1000//自动移动间隔时间     默认null不自动移动;
	});

Demo1Demo2download

赞(0)
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » jQuery滚动插件–Xslider(支持水平滚动和垂直滚动)
分享到: 更多 (0)