Question

我有这个HTML代码：

<div class="inner">
    <div class="nhood">
        <div class="image"></div>
    </div>
</div>

这个CSS：

.image {
    width: 4000px;
    height: 4000px;
    background: beige;
    margin: 150px;
    position: absolute;
}

.nhood {
    overflow: hidden;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    background: black;
}

.image div填充了400个div，全部向左浮动，创建了一个巨大的国际象棋图案，代码如下：

.image > div {
    border: 1px dotted;
    width: 5%;
    height: 5%;
    float: left;
    box-sizing:border-box;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    user-select: none;
}

您可以单击任何单元格以显示其信息，整个.image div可以拖动。现在，如果您选择了一个单元格并且ZOOM（基本上只将4000x4000 div缩小/扩展到2000x2000或反过来），它会随时放大，但我想继续关注之前选择的单元格。

我已经形成了这样的形象： http://smimoo.lima-city.de/zoom.png

我希望这是明确的......

编辑：

JS

    function zoomIn() {
    $(draggable).animate({
                    height: '4000',
                    width: '4000',
                    borderWidth: 0
                }, 600, function() {
                    $divs.animate({
                        borderWidth: 0
                    });
                });
}

    function zoomOut() {
            $(draggable).animate({
                height: '2000',
                width: '2000',
                borderWidth: 0
            }, 600, function() {
                $divs.animate({
                    borderWidth: 1
                });
            });

EDIT2：

这是我的功能中心（在马里奥帮助我之前写的）：

function centerField() {
        var myObject = $(draggable).find('.selected');

        var docWidth = ($(viewport).width() / 2) - (myObject.outerWidth()/2);
        var docHeight = ($(viewport).height() / 2) - (myObject.outerWidth()/4);

        var myOff = myObject.offset();
        var distanceTop = myOff.top - docHeight;
        var distanceLeft = myOff.left - docWidth;

        var position = $(draggable).position();
        var left = position.left;
        var top = position.top;
        var right = left - $(viewport).width() + draggable.outerWidth(true);
        var bottom = top - $(viewport).height() + draggable.outerHeight(true);

        if(left - distanceLeft > 0) {
            distanceLeft = left;
        }

        if(right - distanceLeft < 0) {
            distanceLeft = right;
        }

        if(top - distanceTop > 0) {
            distanceTop = top;
        }

        if(bottom - distanceTop < 0) {
            distanceTop = bottom;
        }

        $(draggable).animate({
            left: '-=' + distanceLeft,
            top: '-=' + distanceTop
        }, { duration: 200, queue: false });

    }

Answer 1

假设所选div具有类.selected，此函数将使div居中：

function centerSelected() {
    var selectedElement =  $('.image .selected');
    var p = selectedElement.position();

    var w = $('.nhood').width();
    var h = $('.nhood').height();

    var offsetX = (w/2)-p.left - (selectedElement.width() / 2);
    var offsetY = (h/2)-p.top - (selectedElement.height() / 2);

    if(offsetX > 0) offsetX = 0;
    if(offsetY > 0) offsetY = 0;

    $('.image').css('left', offsetX + 'px');
    $('.image').css('top', offsetY + 'px');
}

每次缩放操作后都可以调用centerSelected。

这是一个jsfiddle，略微修改了css以使演示工作： http://jsfiddle.net/q1r95w3g/3/

修改如果你想让div在jQuery动画中居中，你可以在centerSelected方法的step回调中调用animate，例如：

function zoomIn() { $(draggable).animate({ height: '4000', width: '4000', borderWidth: 0 },{ duration: 600, complete: function() { $divs.animate({ borderWidth: 0 }); }, step: function(now, fx) { centerSelected(); } }); }

缩放时保持选定的div居中

1 个答案: