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+"></"+o+">");

            u.css({"overflow":"hidden","height":h+"px","margin-bottom":"15px"});

            for(var i=0;i<l;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. 页面可以是这样子

<div id="re" class="dynamic">

 <li>

     <a href="#" class="name">李飞</a>正在申请成为经验达人

 </li>

 <li>

     <a href="#" class="name">李飞</a>已向职场专题《<a href="">我是个亚太人呀亚太人</a>》投稿

 </li>

 <li>

     <a href="#" class="name">董川民</a>已成功购买职场专题《<a href="#">我是个亚太人呀亚太人</a>》

 </li>

 <li>

     <a href="#" class="name">李飞</a>对《<a href="">我是个亚太人呀亚太人</a>》的解决方案又卖出一次

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

    

 <li>

     <a href="#" class="name">李飞</a>向职场专题《<a href="#">我是个亚太人呀亚太人</a>》的投稿已通过审核，获得1元奖励。

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>评论经验：

     <div class="text"><a href="">人生感悟及处事技巧人生感悟及处事</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

   

 <li>

     <a href="#" class="name">李飞</a>已正式成为经验达人

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>评论经验：

     <div class="text"><a href="">人生感悟及处事技巧人生感悟及处事</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

     

 <li>

     <a href="#" class="name">李飞</a>已邀请<a href="#" class="name">董川民</a>成为经验达人

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>评论经验：

     <div class="text"><a href="">人生感悟及处事技巧人生感悟及处事</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

 <li>

     <a href="#" class="name">三内里奥</a>回答了<a href="#" class="name">大飞</a>的提问

     <div class="text"><a href="">人生感悟及处事技巧人生感悟?</a></div>

 </li>

</div>

<script type="text/javascript">

//复杂点的调用写法

//$("#re").setLine(5).setTime(3000).startRoll();

//简单的调用

$("#re").startRoll();

</script>

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