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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
PHP实现记录代码运行时间封装类实例教程
May 08 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
浅谈js中的bind
2019/03/18 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
2014离婚协议书范文
2014/09/10 职场文书
客房领班岗位职责
2015/02/11 职场文书
综合素质评价自我评价
2015/03/06 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
PostgreSQL事务回卷实战案例详析
2022/03/25 PostgreSQL