用JTrackBar实现的模拟苹果风格的滚动条

【 tulaoshi.com - Web开发 】

 
代码如下：

function JObj(){}
JObj.$c = function(tag){return document.createElement(tag)};
JObj.$ = function(id){return document.getElementById(id)};
JObj.isRate = function(pRateString){
    if(!isNaN(pRateString)) return false;
    if(pRateString.substr(pRateString.length-1,1) != "%")
        return false;
    if(isNaN(pRateString.substring(0,pRateString.length - 1)))
        return false;
    return true;
}

function JPos(){}
JPos.getAbsPos = function(pTarget){
    var x_ = y_ = 0;
    while(pTarget.offsetParent){
            x_ += pTarget.offsetLeft;
            y_ += pTarget.offsetTop;
            pTarget = pTarget.offsetParent;
    }
    x_ += pTarget.offsetLeft;
    y_ += pTarget.offsetTop;
    return {x:x_,y:y_};
}

JPos.getMousePos = function(evt){
    var x_ = y_ = 0;
    evt = evt || window.event;
    if(evt.pageX || evt.pageY){
        x_ = evt.pageX;
        y_ = evt.pageY;
    }else{
        x_ = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        y_ = evt.clientY + document.body.scrollTop - document.body.clientTop;
    }

    return {x:x_,y:y_};        
}



!--
/*
----------------------------------------------------------------------
JTrackBar
初始日期：2007/07/11
Author:xlingFairy
Blog:http://xling.blueidea.com

目前只能生水平的，垂直的还没有写。
设计功能：
当改变时，触发事件onChange,并传当前值。

2007/07/12
加入拖动功能。

2007/07/13
加入皮肤功能

2007/08/06
加入垂直的。并修正一个setRange带来的BUG.

未做功能：指定trackFrequence，你可以自己试着修改一下。

请尊重劳动成果！不得删除原作都信息！后果自负！
----------------------------------------------------------------------
*/
function JPos(){

}

JPos.getAbsPos = function(pTarget){
    var _x = 0;
    var _y = 0;
    while(pTarget.offsetParent){
            _x += pTarget.offsetLeft;
            _y += pTarget.offsetTop;
            pTarget = pTarget.offsetParent;
    }
    _x += pTarget.offsetLeft;
    _y += pTarget.offsetTop;

    return {x:_x,y:_y};
}

JPos.getMousePos = function(evt){
    var _x,_y;
    evt = evt || window.event;
    if(evt.pageX || evt.pageY){
        _x = evt.pageX;
        _y = evt.pageY;
    }else{
        _x = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
        _y = evt.clientY + document.body.scrollTop - document.body.clientTop;
    }
    return {x:_x,y:_y};
}

function JTrackBar(pParent){
    var self = this;

    var $ = function(pId){
        return document.getElementById(pId);
    }

    var $c = function(pTag){
        return document.createElement(pTag);
    }

    var trackBarType;    //V & H
    if((typeof pParent).toUpperCase() == "OBJECT")
        var body = pParent;
    else
        var body = $(pParent) || document.body;
    var oOutline    = null;
    var oTrackArea     = null;
    var oBtnPointer    = null;
    var oArrBtnLeft = oArrBtnRight = oArrBtnUp = oArrBtnDown = null;

    var inDrag         = false;
    var dragStartPos = null;

    var maxPosition     = 100;    //最大刻度
    var minPosition        = 0;    //最小刻度
    var base            = 0;
    var position        = 0;    //当前位置
    var trackFrequence    = 10;    //点击一次移动多少刻度

    var defaultArrowW = defaultArrowH = 15;//Only for IE!

    this.setRange = function(pMin,pMax){
        maxPosition = Math.max(pMin,pMax);
        minPosition    = Math.min(pMin,pMax);

        maxPosition -= minPosition;
        base = minPosition;
        minPosition = 0;
    }    

    var outlineWidth,trackAreaWidth,preFrequenceWidth;
    var outlineHeight,trackAreaHeight,preFrequenceHeight;

    this.onChange = new Function();

    var getRunStyle = function(pObj,pProperty){
        try{
            if(pObj.currentStyle)
            return eval("pObj.currentStyle." + pProperty);
        else
            return document.defaultView.getComputedStyle(pObj,"").getPropertyValue(pProperty);
        }catch(e){
            alert(e);
        }
    }

    /*-----------------------------------------------------*/
    var createOutline = function(pWH){
        oOutline            = $c("DIV");
        body.appendChild(oOutline);
        oOutline.className    = "JTrackBarStand";
        if(trackBarType == "H")
            oOutline.style.width = pWH + "px";
        else if(trackBarType == "V")
            oOutline.style.height = pWH + "px";
        oOutline.style.overflow = "hidden";
    }
    /*-----------------------------------------------------*/
    var createArrBtn    = function(pDirection){
        var arrBtn = $c("DIV");
        switch(pDirection){
            case "LEFT":
                arrBtn.className = "btnLeft";
                arrBtn.style.styleFloat = "left";
                arrBtn.style.cssFloat    = "left";
                break;
            case "RIGHT":
                arrBtn.className = "btnRight";
                arrBtn.style.styleFloat = "left";
                arrBtn.style.cssFloat    = "left";        
                break;
            case "UP":
                arrBtn.className = "btnUp";
                break;
            case "DOWN":
                arrBtn.className = "btnDown";
                break;
        }

        arrBtn.direction = pDirection;
        arrBtn.onclick = arrBtn_click;
        return arrBtn;
    }

    var arrBtn_click = function(evt){

        evt = window.event || evt;
        var o = evt.srcElement || evt.target;

        switch(o.direction){
            case "LEFT":
            case "UP":
                self.setPositionBy( -trackFrequence);
                break;
            case "RIGHT":
            case "DOWN":
                self.setPositionBy(trackFrequence);
                break;
        }
    }

    var trackarea_click = function(evt){
        evt = window.event || evt;
        var mPos = JPos.getMousePos(evt);

        var pos_ = JPos.getAbsPos(oTrackArea);

        if(trackBarType == "H"){
            var w_ = parseInt(getRunStyle(oBtnPointer,"width"));        
            self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));
        }else{
            var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
            self.setPosition(parseInt((mPos.y - pos_.y) / preFrequenceHeight));
        }
    }

    var createHTrackArea = function(){
        var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));
        if(isNaN(w_)) w_ = defaultArrowW;

        trackAreaWidth = outlineWidth - 2 * w_;
        preFrequenceWidth = trackAreaWidth / (maxPosition - minPosition);

        oTrackArea = $c("DIV");
        oOutline.appendChild(oTrackArea);

        oTrackArea.onclick = trackarea_click;

        oTrackArea.className = "trackAreaH";
        oTrackArea.style.width = trackAreaWidth + "px";
        oTrackArea.style.styleFloat = "left";
        oTrackArea.style.cssFloat    = "left";
    }

    var createVTrackArea = function(){
        var h_ = parseInt(getRunStyle(oArrBtnUp,"height"));    
        if(isNaN(h_)) h_ = defaultArrowH;
        trackAreaHeight = outlineHeight - 2 * h_;
        preFrequenceHeight = trackAreaHeight / (maxPosition - minPosition);

        oTrackArea = $c("DIV");        
        oOutline.appendChild(oTrackArea);

        oTrackArea.onclick = trackarea_click;
        oTrackArea.className = "trackAreaV";
        oTrackArea.style.height = trackAreaHeight + "px";
    }

    var recalcTrackArea = function(){
        if(trackBarType == "H"){
            var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));
            if(isNaN(w_)) w_ = defaultArrowW;

            trackAreaWidth = outlineWidth - 2 * w_;    
            preFrequenceWidth = trackAreaWidth / maxPosition;

            oTrackArea.style.width = trackAreaWidth + "px";
        }else{
            var h_ = parseInt(getRunStyle(oArrBtnUp,"height"));
            if(isNaN(h_)) h_ = defaultArrowH;

            trackAreaHeight = outlineHeight - 2 * h_;
            preFrequenceHeight = trackAreaHeight / maxPosition;
            oTrackArea.style.height = trackAreaHeight + "px";
        }
    }

    var pointer_mousedown = function(evt){
        inDrag = true;
        dragStartPos = JPos.getMousePos(evt);
        body.onmousemove = pointer_mousemove;
        body.onmouseup = pointer_mouseup;
        body.onmouseout = pointer_mouseout;
    }

    var pointer_mousemove = function(evt){
        if(!inDrag)    return;        
        var mPos = JPos.getMousePos(evt);
        var pos_ = JPos.getAbsPos(oTrackArea);

        if(trackBarType == "H")
            self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));
        else
            self.setPosition(parseInt((mPos.y - pos_.y) / preFrequenceHeight));
    }

    var pointer_mouseup = function(){
        inDrag = false;
    }

    var pointer_mouseout = function(){
        //inDrag = false;
    }

    var createHPointer = function(){
        oBtnPointer = $c("DIV");
        oOutline.appendChild(oBtnPointer);
        oBtnPointer.onmousedown = pointer_mousedown;

        oBtnPointer.className = "btnPointerH";
        oBtnPointer.style.position = "absolute";

        var w_ = parseInt(getRunStyle(oBtnPointer,"width"));
        if(isNaN(w_)) w_ = defaultArrowW;

        var pos_ = JPos.getAbsPos(oTrackArea);
        oBtnPointer.style.left = pos_.x - w_/2 + "px";
        oBtnPointer.style.top = pos_.y + "px";
        oBtnPointer.style.cssText += "left:" + (pos_.x - w_/2) + "px;top:" + pos_.y + "px;";
    }

    var createVPointer = function(){
        oBtnPointer = $c("DIV");    
        oOutline.appendChild(oBtnPointer);
        oBtnPointer.onmousedown = pointer_mousedown;

        oBtnPointer.className = "btnPointerV";
        oBtnPointer.style.position = "absolute";
        var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
        if(isNaN(h_)) h_ = defaultArrowH;

        var pos_ = JPos.getAbsPos(oTrackArea);
        oBtnPointer.style.top = pos_.y - h_/2 + "px";
        oBtnPointer.style.left = pos_.x + "px";
        oBtnPointer.style.cssText += "left:" + pos_.x + "px;top:" + (pos_.y - h_/2) + "px";
    }

    /*-----------------------------------------------------*/
    this.createHTrackBar = function(pWidth){
        trackBarType = "H";
        outlineWidth = pWidth;
        createOutline(pWidth);

        oArrBtnLeft = createArrBtn("LEFT");
        oOutline.appendChild(oArrBtnLeft);

        createHTrackArea();

        oArrBtnRight = createArrBtn("RIGHT");
        oOutline.appendChild(oArrBtnRight);

        createHPointer();
    }
    /*-----------------------------------------------------*/
    this.createVTrackBar = function(pHeight){
        trackBarType = "V";
        outlineHeight = pHeight;
        createOutline(pHeight);

        oArrBtnUp = createArrBtn("UP");
        oOutline.appendChild(oArrBtnUp);

        createVTrackArea();

        oArrBtnDown = createArrBtn("DOWN");
        oOutline.appendChild(oArrBtnDown);

        createVPointer();
    }    
    /*-----------------------------------------------------*/    

    this.setPositionBy = function(pPosition){
        position += pPosition;
        self.setPosition(position);
    }

    this.setPosition = function(pPosition){
        position = pPosition;
        if(position  maxPosition)
            position = maxPosition;
        if(position  minPosition)
            position = minPosition;        

        var pos_ = JPos.getAbsPos(oTrackArea);

        if(trackBarType == "H"){
            var w_ = parseInt(getRunStyle(oBtnPointer,"width"));
            if(isNaN(w_)) w_ = defaultArrowW;

            oBtnPointer.style.left = pos_.x - w_/2 + preFrequenceWidth * position  + "px"; 
        }else if(trackBarType == "V"){
            var h_ = parseInt(getRunStyle(oBtnPointer,"height"));
            if(isNaN(h_)) h_ = defaultArrowH;
            oBtnPointer.style.top = pos_.y - h_/2 + preFrequenceHeight * position  + "px"; 
        }

        doChange();
    }

    var doChange = function(){
        self.onChange(position + base);
    }

    this.getPosition = function(){
        return position;
    }

    this.setSkin = function(pSkin){
        oOutline.className = pSkin;
        recalcTrackArea();
        self.setPosition(minPosition)
    }
}



function JScroll(pWidth,pHeight,pBody){
    var self        = this;
    var oOutline    = null;
    var oContentArea = null;
    var oTrackBarArea = null;

    this.trackBar = null;

    var w        = JObj.isRate(pWidth) ? pWidth : (!isNaN(pWidth) ? pWidth + "px" : "100%");
    var h        = JObj.isRate(pHeight) ? pHeight : (!isNaN(pHeight) ? pHeight + "px" : "100%");

    var db_ = JObj.$(pBody) || document.body;

    var createOutline = function(){
        oOutline = JObj.$c("DIV");
        oOutline.className = "oOutline";
        db_.appendChild(oOutline);
        with(oOutline.style){
            width     =    w;
            height    =    h;
            overflow = "hidden";
        }

        oContentArea = JObj.$c("DIV");
        oOutline.appendChild(oContentArea);
        oContentArea.className = "oContentArea";
        with(oContentArea.style){
            width = oOutline.clientWidth - 25 + "px";
            height = oOutline.clientHeight + "px";
            styleFloat = "left";
            cssFloat = "left";
        }
    }

    this.create = function(){
        createOutline();
    }

    var createTrackBar = function(){
        oTrackBarArea = JObj.$c("DIV");
        oOutline.appendChild(oTrackBarArea);
        with(oTrackBarArea.style){
            width = 20 + "px";
            height = oContentArea.style.height;
            stylefloat = "left";
            cssFloat    = "left";
            overflow     = "hidden";
        }
        self.trackBar = new JTrackBar(oTrackBarArea);
        self.trackBar.onChange = function(pTrackPosition){
            oContentArea.scrollTop = pTrackPosition;
        }                

        self.trackBar.setRange(0,oContentArea.scrollHeight);
        self.trackBar.createVTrackBar(oTrackBarArea.clientHeight);
        self.trackBar.setSkin("JTrackBarSky");
    }    

    this.addContextArea = function(pId){
        oContentArea.appendChild(JObj.$(pId));
        oContentArea.style.overflow = "hidden";

        createTrackBar();
    }

    this.setSkin = function(pSkin){
        self.trackBar.setSkin(pSkin)
    }
}

打包文件下载