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

 

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) 
    } 
}

打包文件下载