滾動條

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