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 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
js实现在文本框光标处添加字符的方法介绍
Nov 24 Javascript
ie支持function.bind()方法实现代码
Dec 27 Javascript
js创建对象的方式总结
Jan 10 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 Javascript
ReactRouter的实现方法
Jan 25 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
php数据库连接
2006/10/09 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js实现表格字段排序
2014/02/19 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
用jQuery向div中添加Html文本内容的简单实现
2016/07/13 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Python、Javascript中的闭包比较
2015/02/04 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python函数中的可变长参数详解
2019/09/12 Python
pygame实现五子棋游戏
2019/10/29 Python
Numpy之reshape()使用详解
2019/12/26 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
学生处主任岗位职责
2013/12/01 职场文书
求职简历中个人的自我评价
2013/12/25 职场文书
实习单位接收函
2014/01/11 职场文书
5.1手机促销活动
2014/01/17 职场文书
少年闰土教学反思
2014/02/22 职场文书
党风廉政建设责任书
2014/04/14 职场文书
服务行业口号
2014/06/11 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
反腐倡廉观后感
2015/06/08 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Python保存并浏览用户的历史记录
2022/04/29 Python
html中相对位置与绝对位置的具体使用
2022/05/15 HTML / CSS