jquery - 화면에서보고있는 이미지의 중심 부분을 찾습니다.

내가보고있는 이미지 위에 그래픽 표시기를 추가하려고합니다. 나는 기본적으로 더 높은 Z- 인덱스를 가진 DIV를 담고있는 오브젝트를 내가보고있는 이미지 위에 올려 놓을 것이다. 기본 이미지는 모든 크기 일 수 있습니다.jquery - 화면에서보고있는 이미지의 중심 부분을 찾습니다.

"표시기 추가"를 클릭하면 표시기 그래픽이 항상 기본 이미지 컨테이너의 상단 (및 외부)에 표시되고 나로 볼 수있는 방법에 대한 아이디어가 있습니까?

또 다른 경우는 이미지가 매우 높으면 (3000px 높이와 같이 스크롤해야 할 수도 있습니다). 그래서 나는 이미지의 바닥 부분을보고 있을지도 모른다.

모든 의견을 환영합니다!

출처

2010-11-30 Scott Yu - Front-End UX

내가이 작은 솔루션은 당신을 도움이되기를 바랍니다 검색 할 수 있습니다. http://jsfiddle.net/neopreneur/ZQqbQ/

두 번째 예에서는 이미지를 스크롤하고 표시기를 다시 보려면 버튼을 클릭하십시오.

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

이 도움이되었는지 알려주세요

-html-

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

. 건배!

출처

2010-11-30 01:36:52

그 것이 아름답게 작동합니다! 정말 고마워! –

잘 당신은 CSS 절대 위치와 zindex를 사용하여 그것을 ontop? 그리고 중앙에 위치하는 퍼센트를 사용

편집 : 당신은 내가 할 수있는 몇 가지 HTML을 보였다 경우 더 helpfull 조금

예를

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

출처

2010-11-30 00:46:36 Breezer

감사합니다. 아주 똑똑! –

을 아주 쉽게 할 수 있어야

1) 원하는 이미지의 오프셋을 가져옵니다.

위와 왼쪽 속성을 사용하면 div 위치를 사용합니다.

절대 위치를 지정하고 더 나은 z- 색인을 제공합니다.

스크롤 문제 사용과 관련하여 문서 높이를 지정하고 전화를 배치 할 수있는 것을 기준으로 나머지 공간을 계산하십시오.

는 플러그인의 많은 이미, 툴팁처럼 availabe 등 아웃을 호출, 구글도

출처

2010-11-30 00:50:50 kobe

jquery - 화면에서보고있는 이미지의 중심 부분을 찾습니다.

답변

관련 문제