DIV 使用垂直滑动动态调整大小 [英] DIV dynamically resizing using vertical slide

问题描述

这有点难以解释，但我会尽力而为:

我的网页使用两个 div 进行划分:一个在左侧浮动，另一个在右侧浮动(每个 50% 或多或少).

我想添加一个新功能:动态调整大小.即:当我单击DIV#1的右边框或单击DIV#2的左边框时，每个都应该从左到右或从右到左调整大小.

也许你不理解我，但是这个效果是我需要的(来自 但我不知道如何同步两者调整大小.

你能帮帮我吗?对此的任何建议或跟踪将不胜感激.谢谢！

解决方案

我使用 15 行 JS/jQ 创建了这个功能:http://jsfiddle.net/xSJcz/

希望对您有所帮助！您可以轻松地将其修改为响应点击或类似内容.

对于未来的记录，这里是答案的 CSS:

#left,#right{边框:1px 实心#aaa；向左飘浮;高度:100px；宽度:48%；}#处理{背景:#000;向左飘浮;高度:100px；边距:1px；宽度:1%；}

HTML:

<div id="left">剩下</div><div id="handle"></div><div id="对">对</div>

JS:

var h = $('#handle'),l = $('#left'),r = $('#right'),w = $('body').width() - 18;var isDragging = false;h.mousedown(功能(e){isDragging = true;e.preventDefault();});$(文档).mouseup(函数(){isDragging = false;}).mousemove(函数(e){如果(是拖动){l.css('宽度', e.pageX);r.css('宽度', w - e.pageX);}});

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 more or less).

I want to add a new feature: dynamically resize. That is: when I click on right border of DIV#1 or click on left border of DIV#2, each one should resize from left to right or right to left.

Maybe you don't understand me, but this effect is what I need (from this plugin):

This plugin only works for images, not divs. I need the same effect on my divs. Actually, I'm trying to use JQueryUI Resizable class but I don't know how to synchronize both resizes.

Can you help me? Any suggestion or track about this would be really appreciated. Thanks!

解决方案

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:

<div id="left">
    Left
</div>
<div id="handle"></div>
<div id="right">
    Right
</div>

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);
    }
});

这篇关于DIV 使用垂直滑动动态调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！