首页 > 代码库 > 滚动条

滚动条

/**oBox滚动条 oBtn滚动条滑块 oText滑动区域 oTxt文本区域 的 class或者id*olong 滚动一次的距离*/(    function($){        $.fn.myScroll = function(options){            var defaults = {    //oBox滚动条 oBtn滚动条滑块 oText滑动区域 oTxt文本区域                oBox:‘right‘,                oBtn:‘btn‘,                oText:‘left‘,                oTxt:‘in‘,                olong:30            }            var obj = $.extend({},defaults,options),_this=$(this);            //获取对象函数            function getDom(dom){                if($(‘.‘+dom)[0]){                    $dom = _this.find(‘.‘+dom);                }else{                    $dom = _this.find(‘#‘+dom);                };                return $dom;            }            //获取对象            obj.oBox = getDom(obj.oBox);            obj.oBtn = getDom(obj.oBtn);            obj.oText = getDom(obj.oText);            obj.oTxt = getDom(obj.oTxt);            //滚动条的最大行程            var iMaxHeight = obj.oBox.outerHeight() - obj.oBtn.outerHeight();            //滚动条的offsettop            var iBoxTop = obj.oBox.offset().top;            //文本内容与外容器的高的差值            var iTxtHeight = obj.oText.outerHeight() - obj.oTxt.outerHeight();            //滚动事件开关            var dragging = false;            obj.oBtn.mousedown(                function (e){                    //滚动事件开关打开                    dragging = true;                    disY = e.pageY - obj.oBtn.offset().top;                    return false;                }            );            $(‘html‘).mousemove(                function (e){                    if(dragging == true){                        $(this).css(‘cursor‘,‘pointer‘);                        var iTop;                        //控制滑块跟随鼠标                        iTop = e.pageY - disY - iBoxTop;                        //控制滑块的范围                        if(iTop<=0){iTop=0;}else if(iTop>=iMaxHeight){iTop=iMaxHeight;}                        obj.oBtn.css(‘top‘,iTop);                        //算出滑块行程与最大行程的百分比                        var iScale = iTop / iMaxHeight;                        //控制文本按滑块行程的百分比调整top值                        obj.oTxt.css(‘top‘,iScale*iTxtHeight);                        return false;                    }                }            );            $(‘html‘).mouseup(                function(){                    $(this).css(‘cursor‘,‘auto‘);                    //滚动事件开关关闭                    dragging = false;                    return false;                }            );            //注册滚动条事件            //IE及其他浏览器注册滚轮            obj.oBox[0].onmousewheel=obj.oText[0].onmousewheel=fnWheel;            //火狐注册滚轮事件            if(window.addEventListener){                obj.oBox[0].addEventListener(‘DOMMouseScroll‘, fnWheel, false);                obj.oText[0].addEventListener(‘DOMMouseScroll‘, fnWheel, false);            }            //定义fnWheel事件            function fnWheel(e){                var e = e || event ;                var iBtn;    //鼠标向上或向下的判断属性                var iTop;                var iScale;                if(e.wheelDelta){        //IE chrome                    iBtn = e.wheelDelta > 0 ? true : false ;    //IE大于0为向上滚为true                }else{                    iBtn = e.detail < 0 ? true : false;            //FF小于0为向上滚为true                }                if(iBtn == true){                    iTop = obj.oBtn.offset().top - iBoxTop - obj.olong;    //滑块向上移动obj.olong                }else{                    iTop = obj.oBtn.offset().top - iBoxTop + obj.olong;    //滑块向下移动obj.olong                }                if(iTop<=0){iTop=0;}else if(iTop>=iMaxHeight){iTop=iMaxHeight;}    //控制滑块范围                obj.oBtn.css(‘top‘,iTop);    //控制鼠标滚动时滑块位置                iScale = iTop / iMaxHeight ;    //算出滑块行程百分比                obj.oTxt.css(‘top‘,iScale*iTxtHeight);    //控制滚动时文本区域的top                //取消滚动时浏览器默认行为                if (e.preventDefault){                    e.preventDefault();        //FF                }else{                    window.event.returnValue = false;    //IE                }                return false;            }        }    })(jQuery);//去第几个lifunction _goto(opts){    var def={        i:2,        L:$(‘.left‘),        l:$(‘.in‘),        R:$(‘.right‘),        r:$(‘.btn‘),        t:300    }    var o = $.extend(def,opts);    //滚动条的最大行程    var iMaxHeight = o.R.outerHeight() - o.r.outerHeight();    //滚动条的offsettop    var iBoxTop = o.R.offset().top;    //文本内容与外容器的高的差值    var iTxtHeight = o.l.outerHeight() - o.L.outerHeight();    //li的高度    var liH = o.l.find(‘li‘).outerHeight();    //计算左边行程    var long1 = o.i*liH ;    long1 = long1 > iTxtHeight ? iTxtHeight : long1;    o.l.animate({        top:-long1    },o.t)    //计算右边行程    var long2 = long1/iTxtHeight*iMaxHeight;    o.r.animate({        top:long2    },o.t);}

 

滚动条