Question

我正在尝试使用angular指令复制FluidBox jQuery图像缩放效果： http://terrymun.github.io/Fluidbox/demo/index.html

单击图像时，它会从内嵌缩放到在视图中居中的叠加层。

我有基本的工作。但是要使图像放大，它需要绝对位置。要以绝对定位元素为中心，您需要自动保证金。但是margin auto正在产生错误的元素抵消。

我正在寻找更好的方法，因为我开始使用超时而且这不好：）

这是图片html：

<img src="thumb.jpg" data-large="large.jpg" />

指令：

app.directive('img', function($window, $document, $timeout) {

    function matchDimensions(parent, el) {
        var elemRect = parent.getBoundingClientRect();
        el.css('bottom', elemRect.bottom + 'px');
        el.css('top', elemRect.top + 'px');
        el.css('left', elemRect.left + 'px');
        el.css('right', elemRect.right + 'px');
        el.css('max-height', elemRect.height + 'px');
        el.css('max-width', elemRect.width + 'px');
    }

    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
            var body = $document.find('body')[0],
                expanded = false,
                overlay = angular.element('<div class="overlay"></div>'),
                table = angular.element('<div class="t"></div>'),
                cell = angular.element('<div class="tc"></div>'),
                clone = element.clone(true);

            element.bind('click', function() {
                if (expanded === false) {
                    matchDimensions(element[0], clone);
                    body.appendChild(overlay[0]);
                    $timeout(function() {
                        clone.addClass('expanded');
                        expanded = true;
                    }, 100);
                }
            });

            clone.bind('click', function() {
                if (expanded === true) {
                    expanded = false;
                    matchDimensions(element[0], clone);
                    clone.removeClass('expanded');
                    $timeout(function() {
                        body.removeChild(overlay[0]);
                    }, 500);
                }
            });

            element.addClass('zoom');
            clone.addClass('expand');
            clone.attr('src', attrs.large);
            overlay.append(table);
            table.append(cell);
            cell.append(clone);
        }
    };
});

和css：

img.expand {
    margin: 0 auto;
    position: absolute;
    transition-duration: .5s;
    transition-property: all;
}

img.expanded {
    cursor: -webkit-zoom-out;
    cursor: zoom-out;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

JSfiddle using css top and left positions

JSfiddle using css3 transforms scale and translate

期待更好的方法来解决这个问题。任何帮助将不胜感激！

Answer 1

对于像 w3school 和 Angular 这样的图像缩放，使用 npm 包 ng-img-magnifier。

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2' [top]='top' [right]='right' [lensWidth]='lensewidth' [lensHeight]='lensheight' [resultWidth]='resultWidth' [resultHeight]='resultheight' [imgWidth]='imgWidth' [imgHeight]='imgheight'> </ng-img-magnifier>

使用这个使用可以完全自定义Angular中的图片缩放组件。

角度图像缩放效果

1 个答案: