修改

Question

任何人都可以帮我在缩放时保持这些盒子之间的差距，我想任何做过多媒体/图形的人都会知道这个算法需要

我为它创造了一个单独的小提琴。 http://jsfiddle.net/p9BJ8/

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
</head>
<body>
    <div id="canvas">
        <div id="innercanvas">
            <div class="square" style="top:30px; left:30px; width:40px; position:absolute; height:40px; background-color:red"></div>
            <div class="square" style="top:100px; left:90px; width:40px; position:absolute; height:40px; background-color:red"></div>
        </div>
    </div>

    <input type="submit" id="ZoomIn" value="+" />

    <script type="text/javascript">
        var zoom = 40;
        $(document).ready(function () {

            $('#ZoomIn').bind('click', function () {
                zoom = zoom + 5;
                $("#innercanvas .square").each(function (index) {

                    $("#innercanvas").width($("#innercanvas").width + 5);
                    $("#innercanvas").height($("#innercanvas").height + 5);

                    var id = $(this).attr("id");


                        var _offset = $(this).offset();
                        $(this).offset({ top: _offset.top + 5, left: _offset.left + 5 });
                        $(this).width(zoom);
                        $(this).height(zoom);                   
                });
            });    
        });

    </script>
</body>
</html>

Answer 1

请参阅此更新的小提琴：http://jsfiddle.net/p9BJ8/1/

我只换了一行：

$(this).offset({ top: _offset.top + 5*index, left: _offset.left + 5*index });

index变量来自函数回调，它只是等于循环的迭代次数。所以第一次通过它是5 * 1，第二次通过它是5 * 2。所以第二个方格向下移动到左边10而不是5，这是必要的，因为第一个方格都移动了5并且大小增加了5个。

修改

在回应OP的评论时，这个评论将对象之间的距离保持为其大小的固定百分比：http://jsfiddle.net/p9BJ8/6/

我创建了以下函数来计算初始“间隙百分比”，它只是gap's width / square's width和gap's height / square's height。我们真的只是用JavaScript进行基本的数学运算，所以希望这个函数足够清晰：

function getGapPercentage(){
    var squares = $("#innercanvas .square");
    var s1 = squares.eq(0);
    var s2 = squares.eq(1);
    var s1top = parseInt(s1.css('top'), 10);
    var s2top = parseInt(s2.css('top'), 10);
    var s1left = parseInt(s1.css('left'), 10);
    var s2left = parseInt(s2.css('left'), 10);
    var h = s1.height();
    var w = s1.width();
    var gapH = s2top - h - s1top;
    var gapW = s2left - w - s1left;
    var gapPercents =  {
        top: gapH / h,
        left: gapW / w
    };

    return gapPercents;
}

从那里，我们只修改设置方块新位置的线：

$(this).offset({
    top: _offset.top + (5 + 5*gapPercents.top) * index,
    left: _offset.left + (5 + 5*gapPercents.left) * index
});

请注意，在.click()事件中，我再次调用getPercentage()函数，但它只显示（通过控制台中的输出）百分比保持不变。不要担心它们实际上似乎略有变化。这只是因为浏览器无法通过一小部分像素来修改内容，因此有时间隙百分比将略微偏离原始版本。但它总是会非常接近原始百分比。

JQuery缩放多个项目，宽高比

1 个答案:

修改