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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
根据地区不同显示时间的javascript代码
Aug 13 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
AngularJs 指令详解及示例代码
Sep 01 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
详解Vue-Router源码分析路由实现原理
May 15 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
计算世界完全对称日的js代码,粗糙版
2011/11/04 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
js模糊查询实例分享
2016/12/26 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
社区国庆节活动方案
2014/02/05 职场文书
超市店庆活动方案
2014/08/31 职场文书
2014年班主任工作总结
2014/11/08 职场文书