zoukankan      html  css  js  c++  java
  • 滚动浏览

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

    $(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")});

    })

  • 相关阅读:
    03《软件需求分析教程》
    02《软件需求分析教程》
    01《软件需求分析教程》
    03《需求模式——软件建模与分析》
    02《需求模式——软件建模与分析》
    密码管理器
    01《需求模式——软件建模与分析》
    2020软件工程助教工作期末总结
    第十七周助教工作周小结
    第十六周助教工作周小结
  • 原文地址:https://www.cnblogs.com/hemei/p/3712181.html
Copyright © 2011-2022 走看看