滚动条

/*
*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);

//去第几个li
function _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);
}