jquery实现页面百叶窗走马灯式翻滚显示效果的方法

2020-05-27 17:59:42易采站长站整理

本文实例讲述了jquery实现页面百叶窗走马灯式翻滚显示效果的方法。分享给大家供大家参考。具体如下:

1. 这里的代码需要jquery1.3以上的支持,如下所示:
jQuery.fn.extend((
    function($){
        var l = 4,//卷动行数
            t=5000,//卷动完一次后,隔多长时间下次开始卷动
            rt=500,//每个n卷动过去的耗时
            n=”li”,//默认的卷动对象内包含的要卷动的HTML标记
            o=”ul”,//如果卷动时,启用的包裹卷动元素的HTML标记
            e,//调用对象
            en,//调用对象内所有的要卷动的对象集合
            h;//卷动行高度
        var vLimit=80;//比视觉极限0.1s还小点
        var maxRnum=Math.ceil(rt/vLimit);//最大卷动次数
        var maxRh=0;//每次卷动高度
        var fnRollFirst=function(arg){//将arg向上卷1个n,完成之后将第1个n移动到最后一个位置
            var rCount=0;//卷动次数纪录
            var rVal=setInterval(function(){//每隔vLimit循环一次,共循环maxRnum-1次
                        rCount++;
                        arg.scrollTop(arg.scrollTop()+maxRh);
                        if(rCount>=(maxRnum-1)){//少卷1次
                            clearInterval(rVal);
                            arg.scrollTop(arg.scrollTop()+h-maxRh*(maxRnum-1));//最后1次修正卷动值
                            //移动第一个元素到最后