jquery - 找到您在屏幕上查看的图像的中心部分

Question

我正在尝试在我正在查看的图像顶部添加图形指示器。我基本上会将包含具有较高 z-index 的对象的 DIV 放在我正在查看的图像顶部。主图像可以是任何尺寸。

那么，当我单击“添加指示器”时，指示器图形将始终弹出到主图像容器顶部（而不是外部）的视图中并可供我查看，有什么想法吗？

另一种情况是如果图像非常高（例如 3000px 高度，则需要滚动）。所以我可能正在查看图像的底部部分。

欢迎任何建议！

Answer 1

那么你使用 css 绝对定位和 zindex 将其置于顶部吗？并使用百分比将其定位在中心

编辑中：
如果你展示一些 html 我可以是一个更有帮助的

例子

<div style="position:relative;">
<div style="position:absolute; margin-left:50%; margin-top:50%;"></div>
<img src="image.jpg"/>
</div>

Answer 2

应该很容易做到

1）获取你想要的图像的偏移量

http://api.jquery.com /offset/

它为您提供顶部和左侧属性，然后使用该位置您的 div

使 div 绝对位置并提供更好的 z-index。

关于滚动问题，使用 、文档高度并计算剩余空间，在此基础上您可以定位您的标注。

有很多插件已经可用，例如工具提示、标注等，也可以在谷歌中搜索

Answer 3

我希望这个小解决方案能够帮助您。你可以在这里看到它的动作：
http://jsfiddle.net/neopreneur/ZQqbQ/

在第二个示例中，滚动图像并单击按钮可查看指示器重新居中。

-css-

.fancy-img{
    display:inline-block;
    position: relative;
    max-height:400px;
    max-width: 300px;
    overflow: auto;
}

.indicator{
    width: 50px;
    height: 50px;
    border: 2px solid green;
    position: absolute;
}

-html-

<div class="fancy-img">
    <img id="img1" src="http://upload.wikimedia.org/wikipedia/en/7/72/Example-serious.jpg" alt="" />
</div>

<div class="fancy-img">
    <img id="img2" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/600px-Example.svg.png" alt="" />
</div>

-js-

$(document).ready(function(){
    // add indicator functionality for each img
    $('.fancy-img').each(function(){
        // button to toggle indicator
        $(this).after('<button class="indicator-btn" data-imageid="' + $(this).find('img').attr('id') + '" type="button">Adjust Indicator</button>');
    });    

    // handle button click
    $('button.indicator-btn').click(function(){
        var imgId = $(this).data('imageid');

        // insert indicator
        $('#' + imgId).before('<div class="indicator" />');

        // center indicator (also adjust for offset)
        var containerWidth = $('#' + imgId).parents('.fancy-img:first').width();
        var containerHeight = $('#' + imgId).parents('.fancy-img:first').height();
        var indicatorWidth = $('.indicator:first').width();
        var indicatorHeight = $('.indicator:first').height();
        var newIndicator = $('#' + imgId).parents('.fancy-img:first').find('.indicator');

        $(newIndicator).css({
            left: containerWidth/2 - indicatorWidth /2 + $('#' + imgId).parents('.fancy-img:first').scrollLeft(),
            top: containerHeight/2 - indicatorHeight/2 + $('#' + imgId).parents('.fancy-img:first').scrollTop()
        });
    });
});

让我知道这是否有帮助。干杯!