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


Posted in Javascript onAugust 06, 2007

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

打包文件下载
Javascript 相关文章推荐
JavaScript 函数replace深入了解
Mar 14 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
随机显示经典句子或诗歌的javascript脚本
Aug 04 #Javascript
比较详细的关于javascript中void(0)的具体含义解释
Aug 02 #Javascript
可实现多表单提交的javascript函数
Aug 01 #Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 #Javascript
取键盘键位ASCII码的网页
Jul 30 #Javascript
服务器安全设置的几个注册表设置
Jul 28 #Javascript
javascript实现的动态文字变换
Jul 28 #Javascript
You might like
php smarty的预保留变量总结
2008/12/04 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php模仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(中)
2017/06/11 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
深入浅出了解Node.js Streams
2019/05/27 Javascript
vue实现文字加密功能
2019/09/27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python strip()函数 介绍
2013/05/24 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
管理学专业个人求职信范文
2013/09/21 职场文书
法学专业求职信
2014/07/15 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
人事文员岗位职责
2015/02/04 职场文书