JavaScript로 CSS 플로트 찾기

JavaScript를 처음 사용했습니다. 이미지의 플로트 속성 (왼쪽/오른쪽)은 어떻게 결정합니까? 내가 http://davemcmillan.net에서 다음과 같은 자막 오버레이 코드를 사용하고JavaScript로 CSS 플로트 찾기

var positionFloat = $(this).position();

- 나는 이런 식으로 뭔가있을 거라고 생각. 그레이트 오버레이, 그냥 캡션 스팬을 왼쪽 또는 오른쪽 이미지와 함께 플로팅 할 수 있어야합니다.

감사합니다.

// display image caption on top of image 
$("#content img").each(function() { 
var imageCaption = $(this).attr("alt"); 

if (imageCaption != '') { 
var imgWidth = $(this).width(); 
var imgHeight = $(this).height(); 
var position = $(this).position(); 
var positionTop = (position.top + imgHeight - 26) 
$("<span class='img-caption'><em>"+imageCaption+"</em></span>") 
.css({"position":"absolute", "top":positionTop+"px", "left":"0", "width":imgWidth +"px"}) 
.insertAfter(this); 
} 

});

출처

2013-10-23 user2912758

CSS 'float' 속성과 아무런 관련이 없습니까? 마치 물체의 절대 위치를 찾는 방법을 물어 보는 것처럼 보이므로 수동으로 물체의 옆에 위치시킬 수 있습니다. 그렇다면 제목과 질문 모두에서 'float'단어를 삭제하십시오. 그러면 사람들이 묻고있는 것에 대해 혼란 스러울뿐입니다. – jfriend00

화상 위에 자막을 배치하는 가장 쉬운 방법은, 동일한 컨테이너 div에서 화상과 자막을 넣어 position:relative로 컨테이너를 선언 한 다음에이 상대 위치하는 텍스트에 절대 위치를 사용하는 컨테이너는 이미지 위에 있습니다. http://jsfiddle.net/jfriend00/Wvtuz/

<div class="container"> 
    <img src="http://photos.smugmug.com/Family/John-Muir-Trail/Favorite-Landscapes/i-PPwFDdc/0/M/JMT-20130727112047-2595-M.jpg"> 
    <div class="caption">Rae Lakes on John Muir Trail</div> 
</div> 

.container { 
    position: relative; 
} 

.caption { 
    position: absolute; 
    top: 10px; 
    left: 140px; 
    color: black; 
    font-size: 28px; 
}

출처

2013-10-23 19:06:09 jfriend00

당신은 CSS 속성과 부동 소수점의 값을 얻을 수 있습니다 :

다음은 예입니다. 이처럼

var sideFloat = $(this).css('float');

출처

2013-10-23 19:26:35 DaniP

JavaScript로 CSS 플로트 찾기

답변

관련 문제