DIV使用垂直幻灯片动态调整大小 [英] DIV dynamically resizing using vertical slide
问题描述
这有点难以解释,但我会尽力而为:
This is a little hard to explain, but I'm going to do my best:
我的网页使用两个div划分:一个在左边浮动,另一个在右边浮动(每个50%左右浮动).
My webpage is divided using two divs: one floating at left, and other floating at right (50% each one more or less).
我想添加一个新功能:动态调整大小.那就是:当我单击DIV#1的右边框或单击DIV#2的左边框时,每个应该从左到右或从右到左调整大小.
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):
此插件仅适用于图片,不适用于div.我需要对我的div具有相同的效果.实际上,我正在尝试使用 JQueryUI可调整大小的类,但我不知道如何同步两者调整大小.
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!
推荐答案
我使用15行JS/jQ创建了此功能: http://jsfiddle.net/xSJcz/
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.
为将来记录,这是答案的CSS:
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屋!