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

Question

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

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

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

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

Answer 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() 
     }); 
    }); 
}); 

Позвольте мне знать, если это помогает. Ура!

Answer 2

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

редактировать: если вы показали некоторые HTML я мог бы быть немного более полезным

пример

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

Answer 3

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

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

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

он предоставляет вам верхнее и левое имущество, затем используйте это положение.

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

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

Есть много плагинов уже доступна: как всплывающие подсказки, вызов аутов и т.д., поиск в гугле также