正在读取中...

正在读取中...

当前位置:首页 > JS代码 > 滚动代码

Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果!

所属栏目:滚动代码 时间:2014-03-14 来源:网络 作者:不详 次围观 次下载
Jquery滚动插件–Xslider:支持水平滚动和垂直滚动的多种效果!
兼容:
查看演示
本地下载
收藏

正在读取中...

可以实现上下、左右切换的4种常见滚动效果形式!最少仅需传入两个参数:

$(".productshow").Xslider({
        unitdisplayed:3,
    numtoMove:3
});

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


功能介绍:
1、可以一次给页面上绑定同一个类的所有对象实现滚动效果;
2、支持水平和垂直方向的滚动;
3、可实现4种滚动形式:

  • 滚动到对象底部就结束滚动而不是依然移动指定距离

  • 每次滚动固定距离,滚动到最后时不识别对象的底部,而是依然移动固定距离

  • 循环滚动

  • 自动滚动

使用方法:

$(".productshow").Xslider({
    unitdisplayed:3,//必需项;
    numtoMove:1,//必需项;
    viewedSize:120,
    scrollobj:".vscrollobj",
    unitlen:20,
    scrollobjSize:$(".vscrollobj").height(),
    dir:"V",
    loop:"cycle",
    speed:500,
    autoscroll:2000
});

参数说明:
○ “.productshow”是要实现滚动效果的对象,该对象要包含一个被移动的对象和左右移动按钮。如下面的html结构:


<div class="productshow">
    <div class="scrollobj">
         <!--具体内容-->
    </div>
    <a href="#left" class="abtn aleft">左移</a>
    <a href="#right" class="abtn aright">右移</a>
</div>

“.scrollobj”是被移动的对象,他的position属性需设置为absolute或relative,因为脚本是通过改变它的left或top值来实现滚动效果的。左右移动按钮的class名称,左按钮需指定为“.aleft”,右按钮为“.aright”。在按钮不可用状态下,他的class名称分别是“.agrayleft”和“.agrayright”。他们html结构的位置不是固定的,只要在“.productshow”下能找到这些对象就行。
另外,给“.productshow”绑定脚本后,页面上所有的“.productshow”对象都能实现滚动效果;
unitdisplayed:该参数是必需项。指定可视框内可见的最小单元个数;
numtoMove:该参数是必需项。指定每次移动最小单元的个数;
unitlen:该参数是可选项。指定最小单元的宽度或高度,如果不指定的话,默认查找“.productshow”下li的尺寸;
scrollobjSize:该参数是可选项。移动最长宽或高(就是要移动对象“.scrollobj”最大能设置的left或top值),不传入则由“.productshow”下li个数乘以unitlen计算。demo页面的范例一效果就是通过指定该值来实现;
dir:H | V,该参数是可选项。指定水平滚动还是垂直滚动,默认是’“H”水平滚动,注意是大写字母;
loop:cycle,该参数是可选项。指定是否需要循环滚动,不需要则不要传入该参数,注意如果html结构不是li列表的话不能实现循环滚动的效果
speed:该参数是可选项。指定每次移动的速度,单位是毫秒;
autoscroll:该参数是可选项。指定自动滚动的间隔时间,单位是毫秒,不传入则不会自动滚动。

具体效果请看演示,一流资源网推荐下载。

请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

正在读取中...

猜你喜欢

共有 条评论

给个评价吧

验证码: