JQuery - найти центральную часть изображения, которое вы смотрите на экране - PullRequest
Новая
       1

JQuery - найти центральную часть изображения, которое вы смотрите на экране

0 голосов
/ 30 ноября 2010

Я пытаюсь добавить графический индикатор поверх изображения, на которое я смотрю. Я бы в основном поместил объект, содержащий DIV, с более высоким z-индексом поверх изображения, на которое я смотрю. Основное изображение может быть ЛЮБОГО РАЗМЕРА.

Так есть какие-нибудь идеи о том, как, когда я нажимаю «Добавить индикатор», изображение индикатора всегда будет отображаться в верхней части контейнера основного изображения (а не снаружи) и быть видимым мной?

Другой случай, если изображение очень высокое (например, высота 3000 пикселей, требуется прокрутка). Поэтому я могу просматривать нижнюю часть изображения.

Любые предложения приветствуются!

Ответы [ 3 ]

1 голос
/ 30 ноября 2010

Это должно быть очень легко сделать

1) Получить смещение изображения, которое вы хотите

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

, которое предоставляет вам верхнее и левое свойства затемиспользуйте эту позицию, чтобы ваш div

сделал абсолютную позицию div и обеспечил лучший z-индекс.

Что касается использования задачи прокрутки, высоты документа и расчета оставшегося пространства, исходя из того, что вы можете расположитьВаш звонок.

Существует множество плагинов, таких как всплывающие подсказки, вызовы и т. д., поиск в Google также

1 голос
/ 30 ноября 2010

Надеюсь, это небольшое решение поможет вам.Вы можете увидеть это действие здесь: 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()
        });
    });
});

Дайте мне знать, помогло ли это.Ура!

1 голос
/ 30 ноября 2010

ну, вы используете абсолютное позиционирование css и zindex, чтобы получить его поверх?и используйте проценты, чтобы расположить его в центре

edit: если бы вы показали html, я мог бы быть немного более полезным

пример 

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