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

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

苏州实时公交查询

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

参数说明

[js]$(".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不自动移动;
});
[/js]

Demo1Demo2download

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

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏