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

【问题标题】：jquery - find center part of image you are looking at on the screenjquery - 在屏幕上找到您正在查看的图像的中心部分
【发布时间】：2011-05-17 14:38:43
【问题描述】：

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

所以关于当我单击“添加指示器”时，指示器图形总是会弹出到主图像容器顶部（而不是在它之外）并可供我查看的任何想法？

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

欢迎提出任何建议！

【问题讨论】：

标签： jquery image center

【解决方案1】：

我希望这个小解决方案能帮到你。你可以在这里看到它的作用： 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()
        });
    });
});

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

【讨论】：

【解决方案2】：

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

编辑：如果您显示一些 html，我可能会更有帮助

例子

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

【讨论】：

【解决方案3】：

应该很容易做到的

1) 获取你想要的图片的偏移量

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

它为您提供 top 和 left 属性，然后使用您的 div 的位置

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

关于滚动问题使用，文档高度和计算剩余空间，基于此您可以定位您的调用。

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

【讨论】：