用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 相关文章推荐
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
AngularJS基础 ng-repeat 指令简单示例
Aug 03 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
微信小程序实现banner图轮播效果
Jun 28 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
Jul 26 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
随机显示经典句子或诗歌的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
服务器web工具 php环境下
2010/12/29 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
javascript 继承实现方法
2009/08/26 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python实现kmp算法的实例代码
2019/04/03 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
大学生会计职业生涯规划范文
2014/02/28 职场文书
计算机网络工程专业职业生涯规划书
2014/03/10 职场文书
英语读书笔记
2015/07/02 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL