Question

我制作了一个画廊，上面显示了带有链接（工具提示）的图像。当图像调整大小时，链接应该随着它指向图像的位置移动。问题是当图像调整大小时，链接移动得比应该移动得多。我无法计算链接的正确位置。这是我的代码：

$(document).ready(function() {

            var start_width = $('#inspic').width();
            var start_height = $('#inspic').height();

            $(window).resize(function () {

                var current_width = $('#inspic').width();
                var current_height = $('#inspic').height();

                var change_x = (current_width - start_width);
                var change_y = (current_height - start_height);

                $('.inspiracje_anchor').each(function(i, obj) {

                    var anchor_x = parseInt($(this).css('left'));
                    var anchor_y = parseInt($(this).css('top'));

                    $(this).css('left', (anchor_x + change_x) + 'px');
                    $(this).css('top', (anchor_y + change_y) + 'px');

                    start_width = current_width;
                    start_height = current_height;

                });

            });

        });

和HTML：

<div id="picture_container">

        <img id="inspic" src="example_image.jpg" />

        <a class="inspiracje_anchor" id="a1" style="left: 453px; top: 250px;">+</a>

        <a class="inspiracje_anchor" id="a2" style="left: 550px; top: 278px;">+</a>

    </div>

您可以在此处查看示例：

EXAMPLE

我应该如何正确计算链接的位置？

使用javascript调整一个元素大小时移动DOM元素

0 个答案: