zoukankan      html  css  js  c++  java
  • 可拖拽进度条(限制拖拽方向)

    实现效果:

      代码如下:

    html:

    <div id='speed_wrapper'>
        <p id='steep_text'></p>
        <div id='speed_content'></div>
        <span id='speed_handle'>></span>
    </div>

    css:

    /* 可拖拽进度条 */
    #application_wrapper4 #speed_wrapper{
        margin:30px 0 0 0 ;
        position:relative;;
        height:20px;
        background:#bbb;
        cursor:pointer;
        border-radius:20px;
    }
    #speed_content{
        position:absolute;
        top:0;
        left:0;
        width:0%;
        height:100%;
        background:#337ab7;
        border-radius:20px;
    }
    #speed_handle{
        color:#fff;
        text-align:center;
        border: 1px solid #337ab7;
        position:absolute;
        top:-4px;
        left:0;
        width:28px;
        height:28px;
        line-height:28px;
        border-radius:50%;
        background:#41dbdc;
        cursor:pointer;
    }
    #steep_text{
        position: absolute;
        top: -20px;
        left: 0;
        text-align:center;
    }

    js:

    /**
     * //可拖拽进度条 只能向大数值方向拖动 
     * @param a 整数 number类型
     * @returns
     */
    
    function onMousemove(a){
        var initX = (a === undefined ? 0 : a);//初始化值 整数形式 0-100  目的为了限制不可以向左拖拽
        $('#steep_text').text(initX+ '%');
        $('#speed_handle').css('left',(initX*$('#speed_wrapper').width()/100)-14+'px');
        $('#speed_content').width((initX*$('#speed_wrapper').width()/100)+'px');
        
        $('#speed_wrapper').on('mousedown',function(e){
            var Px    =    e.pageX;//记录鼠标x轴位置
            var X    =    Px - $('#speed_wrapper').offset().left;//句柄位置以及内div宽度
        
            if(X/$(this).width() > 0.99){
                X = $(this).width();
            }
            var X_    =    parseInt((X/$(this).width())*100,10);
            if(initX > X_){
                return false;
            }
            $('#speed_handle').css('left',X-14+'px');
            $('#speed_content').width(X+'px');
            $('#steep_text').text(X_+ '%');
            initX = X_;
            return false;
        });
        
        $('#speed_handle').on('click',function(){
            return false;
        });
        $('#speed_content').on('mousedown',function(){
            return false;
        });
        $('#speed_wrapper').on('mouseup',function(){
            $(document).unbind('mousemove');
            return false;
        });
        $('#speed_handle').on('mousedown',function(e){
            $(document).on('mousemove',function(e){
                var Px    =    e.pageX;//记录鼠标x轴位置
                var X    =    Px - $('#speed_wrapper').offset().left;//句柄位置以及内div宽度
                if(X >= $('#speed_wrapper').width()){
                    X = $('#speed_wrapper').width()
                };
                if(X < 0){
                    X = 0;
                }
                $('#speed_handle').css('left',X-14+'px');
                $('#speed_content').width(X+'px');
                var X_    =    parseInt((X/$('#speed_wrapper').width())*100,10);
                if(X_ < initX){
                    X_ = initX;
                    $('#speed_handle').css('left',$('#speed_wrapper').width()*X_/100 - 14+'px');
                    $('#speed_content').width($('#speed_wrapper').width()*X_/100+'px');
                }
                $('#steep_text').text(X_+ '%');
                initX = X_;
            });
            $(document).on('mouseup',function(e){
                $(document).unbind('mousemove');
                return false;
            })
            return false;
        });
    };

    代码比较简单,只是有些小细节需要注意 比如防止mousedown,mouseup事件冒泡,解除document事件绑定等,在此记下,提醒自己基础很重要!

  • 相关阅读:
    重写移动端滚动条[iScroll.js核心代码]
    利用canvas将网页元素生成图片并保存在本地
    微信小程序的拖拽、缩放和旋转手势
    设计模式之访问者(visitor)模式
    设计模式之原型(prototype)模式
    设计模式之享元(flyweight)模式
    设计模式之职责链模式
    设计模式之组合(compose)模式
    leetcode16
    校招真题练习013 找零(头条)
  • 原文地址:https://www.cnblogs.com/cy3664983/p/8610874.html
Copyright © 2011-2022 走看看