0

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

我为它创建了一个单独的小提琴。 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>
4

1 回答 1

0

看到这个更新的小提琴：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()再次调用该函数，但它只是为了向您显示（通过控制台中的输出）百分比保持不变。不要担心它们实际上似乎略有变化。那只是因为浏览器不能修改一小部分像素，所以有时间隙百分比会与原始值相差很小。但它总是会非常接近原始百分比。

于 2013-02-03T20:17:19.037 回答