html和js矩形大小调整问题

html and js rectangle resizing issue

本文关键字：调整 问题 js html      更新时间：2023-09-26

我正在开发一个像这样的拼贴画[1]：http://www.fotor.com/features/collage.html但是我使用的是javascript和html。现在我面临的问题是，我想动态调整矩形的大小。动态地说，我的意思是，如果我调整任何一个矩形的大小，其他矩形也会调整大小，所以有人能帮助我或建议我任何解决方案吗？或者任何js库？或者如果有人做过可以分享吗？

if (newSide != UNKNOWN) {
    if (ndiv.resize(newSide, deltaX, deltaY)); { //
        this.resizeNeighbours(newSide, ndiv, deltaX, deltaY);
        calls.push({
            d: ndiv,
            n: newSide,
            dx: deltaX,
            dy: deltaY
        });
    }
} //end if new side unknown 
} //end 
for
for (i = 0; i < calls.length; i++) {
    c = calls[i];
    this.autoSizeDivs(c.n, c.d, c.dx, c.dy, dep + 1);
}
} catch (e) {
    console.log(e);
}
return true;
}

您可以为每一行提供一个CSS类，然后在jQuery的帮助下，使用CSS选择器获取该行中的所有图像。然后对每个选定的DOM元素调用resize函数。

看看这个小提琴：http://jsfiddle.net/f8DY8/28/看看这篇文章：展开一个div以获得剩余的宽度

<style>
.rec{
    border:1px solid #249fea;
    margin:3px;
}
.container
{
    width:300px;
    height:300px;
    border:1px solid #ccc;
}
</style>

<button id="changeWidthBtn">Change Width</button><br/>
<div class="container">
    <div style="float:left;width:100px;height:200px;" class="rec" id="one">one</div>
    <div style="overflow:hidden;height:50px;" class="rec">two</div>
    <div class="rec" style="overflow:hidden;height:150px;">three</div>
</div>

<script>
$("#changeWidthBtn").click(function(){
    $("#one").width("200px");
});
</script>
相关文章：