这有点难以解释,但我会尽力而为:
我的网页使用两个 div 进行划分:一个在左侧 float ,另一个在右侧 float (各增加或减少 50%)。
我想添加一个新功能:动态调整大小。也就是说:当我点击 DIV#1 的右边框或点击 DIV#2 的左边框时,每个都应该从左到右或从右到左调整大小。
也许你不理解我,但这个效果是我需要的(来自this plugin):
此插件仅适用于图像,不适用于 div。我需要对我的 div 产生同样的效果。实际上,我正在尝试使用 JQueryUI Resizable class但我不知道如何同步这两个调整大小。
你能帮帮我吗?对此有任何建议或跟踪,我们将不胜感激。谢谢!
最佳答案
我使用 15 行 JS/jQ 创建了这个功能: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:
<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);
}
});
关于javascript - DIV使用垂直滑动动态调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5180806/