jquery - trouve la partie centrale de l'image que vous regardez sur l'écran

Question

J'essaie d'ajouter un indicateur graphique au-dessus d'une image que je regarde. Je mettrais fondamentalement l'objet contenant DIV avec l'index supérieur sur l'image que je regarde. L'image principale peut être n'importe quelle taille.

Donc, des idées sur la façon dont lorsque je clique sur "Ajouter un indicateur", le graphique de l'indicateur serait toujours apparaître sur le dessus du conteneur de l'image principale (et non à l'extérieur) et visible par moi?

Un autre cas est si l'image est très élevée (comme la hauteur 3000px, il faudrait défiler). Donc, je pourrais regarder la partie inférieure de l'image.

Toutes les suggestions sont les bienvenues!

Answer 1

J'espère que cette petite solution va vous aider. Vous pouvez voir l'action ici: http://jsfiddle.net/neopreneur/ZQqbQ/

Dans le deuxième exemple, faites défiler l'image et cliquez sur le bouton pour voir l'indicateur se recentrer.

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

Permettez-moi de savoir si cela a aidé. À votre santé!

Answer 2

Eh bien, vous utilisez le positionnement absolu css et zindex pour l'obtenir ontop? et utiliser pour cent pour le positionner dans le centre

modifier: si vous montriez un peu html je pourrais être un peu plus serviable

exemple

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

Answer 3

Il devrait être très facile à faire

1) Obtenez le décalage de l'image que vous voulez

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

il vous fournit la propriété supérieure et gauche alors utilisez votre div

faire la div position absolue et donner un meilleur indice-z.

En ce qui concerne le problème de défilement utiliser, documenter la hauteur et calculer l'espace restant, basé sur ce que vous pouvez positionner votre appel.

Il y a beaucoup de plugins availabe déjà comme infobulles, appelez outs etc, recherche dans google aussi