DIV dynamically resizing using vertical slide

后端 未结 1 1798
南方客
南方客 2021-02-11 09:50

This is a little hard to explain, but I\'m going to do my best:

My webpage is divided using two divs: one floating at left, and other floating at right (50% each one mor

1条回答
  •  死守一世寂寞
    2021-02-11 10:09

    I created this functionality using 15 lines of JS/jQ: http://jsfiddle.net/xSJcz/

    Hope it helps! You could easily modify it to respons to click, or similar.

    EDIT: For future records, here is the answer's CSS:

    #left,#right{
        border:1px solid #aaa;
        float:left;
        height:100px;
        width:48%;
    }
    #handle{
        background:#000;
        float:left;
        height:100px;
        margin:1px;
        width:1%;
    }
    

    HTML:

    Left

    JS:

    var h = $('#handle'),
        l = $('#left'),
        r = $('#right'),
        w = $('body').width() - 18;
    
    var isDragging = false;
    
    h.mousedown(function(e){
        isDragging = true;
        e.preventDefault();
    });
    $(document).mouseup(function(){
        isDragging = false;
    }).mousemove(function(e){
        if(isDragging){
            l.css('width', e.pageX);
            r.css('width', w - e.pageX);
        }
    });
    

    0 讨论(0)
提交回复
热议问题