滚动浏览

标签：ext   int   html   set   c   cti   

今天下午做了一个滚动浏览效果，贴在此，积累

$(function(){
    /*
     * 滚动浏览
     */
     $.fn.autoScroll = function(o){
         o = $.extend({
            speed: 20,
            step : 1,
            up : null,
            down : null
        }, o || {});
         var wrap = $(this)[0],
             u1 = $(this).children("ul:first")[0],
             u2 = $(this).children("ul:last")[0],
             timer = null,
             scrollup = null,
             oldSetp = o.step;
         
        var scrolldown = function(){
                if(u1.offsetHeight-wrap.scrollTop<=0)
                wrap.scrollTop-=u1.offsetHeight;
                else{
                wrap.scrollTop += o.step;
                }
        };
        var sup = function(){
                var mid = u2;
                u1 = u2; u2 = mid;
                wrap.scrollTop = $(u1).height();
                return function(){
                        $("#test").html(wrap.scrollTop);
                        if(wrap.scrollTop<=0)
                        wrap.scrollTop = $(u1).height();
                        else{
                        wrap.scrollTop -= o.step;
                        }
                }
        };

        o.up.bind("mousedown",function(){
            o.step = 8;
        }).bind("mouseup",function(){
            o.step = oldSetp;
        });

        o.down.bind("mousedown",function(){
            if(typeof scrollup != ‘function‘) { scrollup = sup(); sup = null; }
            o.step = 8;
            clearInterval(timer);
            timer = setInterval(scrollup,o.speed);
        }).bind("mouseup",function(){
            o.step = oldSetp;
            clearInterval(timer);
            timer = setInterval(scrolldown,o.speed);  
        });

        var timer = setInterval(scrolldown,o.speed);
    
        wrap.onmouseover = function(){clearInterval(timer);};
        wrap.onmouseout = function(){timer = setInterval(scrolldown,o.speed);};
     };

    var reOrder = $("#recentOrder");
    $(".reorder",reOrder).autoScroll({up:$("#reUp"),down:$("#reDown")});

})

滚动浏览,布布扣,bubuko.com

滚动浏览

标签：ext   int   html   set   c   cti   

原文地址：http://www.cnblogs.com/hemei/p/3712181.html