DIV使用垂直幻灯片动态resize

这有点难以解释，但我会尽我所能：

我的网页使用两个div进行划分：一个浮动在左边，另一个浮动在右边（每个浮动50％或更多）。

我想添加一个新function： 动态resize 。 也就是说：当我点击DIV＃1的右边框或点击DIV＃2的左边框时，每个应该从左到右或从右到左resize。

也许你不理解我，但这个效果是我需要的（来自这个插件 ）：

此插件仅适用于图像，而不适用于div。 我对我的div需要同样的效果。 实际上，我正在尝试使用JQueryUI Resizable类，但我不知道如何同步两个resize。

你能帮助我吗？ 任何关于此的建议或跟踪都将非常感激。 谢谢！

Answer 1

我用15行JS / jQ创建了这个function： http ： //jsfiddle.net/xSJcz/

希望能帮助到你！ 您可以轻松修改它以响应点击或类似。

编辑：为了将来的记录，这里是答案的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 
 
 
 Right  

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