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

本文实例讲述了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次修正卷动值
                            //移动第一个元素到最后
                            var nowN=arg.children(n);
                            nowN.eq(nowN.length-1).after(nowN.eq(0));
                            //第一个位置空出后需要通过倒卷修正回来
                            arg.scrollTop(-h);
                        };
                    },vLimit);
        };
        var fnRollArr=function(arg){//对数组中的对象逐一启动卷动
            var out=setInterval(function(){
                fnRollFirst(arg.shift());
                if(!arg.length){
                    clearInterval(out);
                };
            },rt);     
        };
        var fnRoll=function(){//获得需要逐个卷动的对象集合
            var arr=new Array();
            e.children(o).each(function(){
                var rn=$(this).children(n);
                if(rn.length>1){
                    arr.push($(this));
                };
            });
            setInterval(function(){
                fnRollArr(arr.slice(0));
            },t);
        };
        var fnLay=function(){//布局页面
            h=en.height();
            var nu=Math.ceil(en.length/l);
            var u=$("<"+o+">");
            u.css({"overflow":"hidden","height":h+"px","margin-bottom":"15px"});
            for(var i=0;i                 en.slice(nu*i,nu*(i+1)).wrapAll(u);
            };         
        };
        var fnMain=function(){//卷动主方法
            if(maxRnum>1){
                fnLay();
                maxRh=Math.ceil(h/maxRnum);
                fnRoll();
            };
        };
        var fnStart= function(arg){//初始化显示方式
            e=arg;
            en = e.children(n);
            en.show();
            if(en.length>l){
                fnMain();
            }else{
                return false;
            };
        };
        return {
            setLine : function(num){//设置要分成多少行来卷动
                (!isNaN(num) && num>0)?l=num:"";
                return this;
            },
            setTime : function(num){//卷动间隔时间:毫秒
                (!isNaN(num) && num>0)?t=num:"";
                return this;
            },
            startRoll : function(){//启动卷动
                fnStart(this);
            }
        };
    }
)(jQuery));
2. 页面可以是这样子
复制代码 代码如下:
 

希望本文所述对大家的jQuery程序设计有所帮助。