JTrackBar水平拖动效果

<!--
/*
----------------------------------------------------------------------
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();
    }
}
打包文件下载

(0)

相关推荐

  • 比较精简的Javascript拖动效果函数代码

    拖动效果函数演示 by Longbill.cn body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } function drag(o,s) { if (typeof

  • Javascript实现的类似Google的Div拖动效果代码

    复制代码 代码如下: JScript 文件: //检测浏览器 MSIE Firefox var ie=false,moz=false; (function() {//check the browser var userAgent=navigator.userAgent; if(userAgent.indexOf("MSIE")!=-1) ie=true; else if(userAgent.indexOf("Firefox")!=-1) moz=true; })()

  • js 鼠标拖动对象 可让任何div实现拖动效果

    js鼠标拖动对象: 复制代码 代码如下: //定义鼠标拖动对象 drag=function (a,o){      var d=document;if(!a)a=window.event;         if(!a.pageX)a.pageX=a.clientX;         if(!a.pageY)a.pageY=a.clientY;      var x=a.pageX,y=a.pageY;      if(o.setCapture)          o.setCapture();

  • 基于jquery的一行代码轻松实现拖动效果

    实现拖动效果. 复制代码 代码如下: $(document).ready( function() { $("#divPanel").easydrag(); } ); Html 代码 复制代码 代码如下: <div id="divPanel" style="width:300px;height:300px;background:white;border:1px solid #000000;position:absolute;left:5px;top:5

  • JS 拖动效果实现代码 比较简单

    JS拖动效果 Drag Me [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JTrackBar水平拖动效果

    <!-- /* ---------------------------------------------------------------------- JTrackBar 初始日期:2007/07/11 Author:xlingFairy Blog:http://xling.blueidea.com 目前只能生水平的,垂直的还没有写. 设计功能: 当改变时,触发事件onChange,并传当前值. 2007/07/12 加入拖动功能. 2007/07/13 加入皮肤功能 未做功能:指定tra

  • Android使用ViewDragHelper实现QQ聊天气泡拖动效果

    QQ聊天气泡拖动效果Android实现代码,供大家参考,具体内容如下 概述 本文的目的是实现类似于QQ消息提醒的气泡的拖拽效果.网上已有大神的实现效果是通过监听控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MOVE,ACTION_UP事件来处理相应的拖拽效果,这里采用ViewDragHelper的方式去实现拖拽,顺便学习了一下ViewDragHelper的使用方式,拖拽时的粘连效果采用贝塞尔曲线来实现. 用ViewDragHelper实现拖拽效果 ViewDragHe

  • angularjs创建弹出框实现拖动效果

    本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下 运行效果图: 由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现. .directive('draggable', ['$document', function($document) { return function(scope, element, attr) { var startX = 0,

  • iOS粒子路径移动效果 iOS实现QQ拖动效果

    粒子效果,QQ拖动效果,实现很简单,具体代码如下 一.图示 二.分析 我们要实现的如果如上面的图示,那么我们可以按照下面的步骤操作: 第一步:我们的红点其实是一个UIButton.创建一个BageValueView继承自UIButton 第二步:初始化的时候,初始化控件,设置圆角,修改背景.文字颜色 第三步:添加手势.在手势的处理中我们,我们需要让当前控件随着手指移动而移动. 第四步:控件一开始创建的时候,其实有两个圆,一个就是我们能够拖动的大圆,另外一个就是原始位置上会改变大小的圆.这一步骤中

  • jQuery实现拖动效果的实例代码

    jQuery实现拖动效果的实例代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <style> div{ width:100px; height:100px; background:red; position:absolute;} </style> <script type="text/javascript" src="js/jquery-1.11.3.js">

  • js实现div在页面拖动效果

    本文实例讲述了js实现div在页面拖动效果.分享给大家供大家参考,具体如下: <style type="text/css"> body { margin: 0px; } #div1 { display: none; position: absolute; z-index: 1000; height: 100%; width: 100%; background: #000000; filter:Alpha(opacity=30); } #div2 { display: non

  • Bootstrap的modal拖动效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: (function(){ function moveModal($this){ var $head = $this.find('.modal-header'); var $dialog = $this.find('.modal-dialog'); var move = { isMove: false, left: 0, top: 0 }; //委托 console.log('点击的是',$this); $this.on('mousemove'

  • JS实现超简单的鼠标拖动效果

    本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo

  • JS响应鼠标点击实现两个滑块区间拖动效果

    本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>

随机推荐