JTrackBar水平拖动效果


Posted in Javascript onJuly 15, 2007

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

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

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

2007/07/13
加入皮肤功能

未做功能:指定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 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 position        = 0;    //当前位置
    var trackFrequence    = 10;    //点击一次移动多少刻度

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

    var outlineWidth,trackAreaWidth,preFrequenceWidth;

    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(pWidth){
        oOutline            = $c("DIV");
        body.appendChild(oOutline);
        oOutline.className    = "JTrackBarStand";
        oOutline.style.width = pWidth + "px";    
        //oOutline.style.height = "15px";
        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":
                if(position <= minPosition)
                    return;
                self.setPositionBy( -trackFrequence);
                break;
            case "RIGHT":
                if(position >= maxPosition)
                    return;
                self.setPositionBy(trackFrequence);
                break;
        }
    }

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

        var pos_ = JPos.getAbsPos(oTrackArea);
        var w_ = parseInt(getRunStyle(oBtnPointer,"width"));        

        self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));
    }

    var createHTrackArea = function(){
        var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));
        trackAreaWidth = outlineWidth - 2 * w_;
        preFrequenceWidth = trackAreaWidth / (maxPosition - minPosition);

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

        oTrackArea.onclick = trackarea_click;

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

    var recalcTrackArea = function(){
        var w_ = parseInt(getRunStyle(oArrBtnLeft,"width"));
        trackAreaWidth = outlineWidth - 2 * w_;        
        preFrequenceWidth = trackAreaWidth / (maxPosition - minPosition);

        oTrackArea.style.width = trackAreaWidth + "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;
        //evt = window.event || evt;
        //var x_ = evt.clientX;
        //window.status = x_ + " " + dragStartPos.x;
        //self.setPositionBy(x_ - dragStartPos.x);

        //window.status += " " +  evt.clientX;

        var mPos = JPos.getMousePos(evt);
        var pos_ = JPos.getAbsPos(oTrackArea);

        self.setPosition(parseInt((mPos.x - pos_.x) / preFrequenceWidth));        
    }

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

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

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

        //oBtnPointer.onclick = trackarea_click;
        oBtnPointer.onmousedown = pointer_mousedown;
        //oOutline.onmousemove = oBtnPointer.onmousemove = pointer_mousemove;
        //oBtnPointer.onmouseup    = pointer_mouseup;
        //oBtnPointer.onmouseout = pointer_mouseout;

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

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

        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;";
    }

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

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

        createHTrackArea();

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

        createHPointer();
    }
    /*-----------------------------------------------------*/

    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);
        var w_ = parseInt(getRunStyle(oBtnPointer,"width"));

        oBtnPointer.style.left = pos_.x - w_/2 + preFrequenceWidth * position  + "px"; 

        doChange();
    }

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

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

    this.setSkin = function(pSkin){
        oOutline.className = pSkin;
        recalcTrackArea();
    }
}
打包文件下载

Javascript 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
Track Image Loading效果代码分析
Aug 13 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
jQuery 技巧小结
Apr 02 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 #Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 #Javascript
建立良好体验度的Web注册系统ajax
Jul 09 #Javascript
HTML中事件触发列表与解说
Jul 09 #Javascript
建议大家看下JavaScript重要知识更新
Jul 08 #Javascript
Javascript 个人笔记(没有整理,很乱)
Jul 07 #Javascript
使用户点击后退按钮使效三行代码
Jul 07 #Javascript
You might like
Terran兵种对照表
2020/03/14 星际争霸
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
jquery下checked取值问题的解决方法
2012/08/09 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实现FTP循环上传文件
2020/03/20 Python
如何利用python 读取配置文件
2021/01/06 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
大一新生学期自我评价
2014/04/09 职场文书
团日活动总结报告
2014/06/25 职场文书
社会发展项目建议书
2014/08/25 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书