2013-10-23 43 views
1

我是新來使用JavaScript。如何確定圖像的浮動屬性(左/右)?我認爲這將是這樣的 -使用JavaScript查找CSS Float

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

我使用從http://davemcmillan.net以下標題疊加代碼。偉大的覆蓋,我只需要能夠浮動圖像的標題跨度 - 左或右。

謝謝!

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

}); 
+3

你的問題沒有任何關於CSS'float'屬性嗎?看起來你只是問你如何找到對象的絕對位置,所以你可以手動定位它旁邊的東西。如果是這樣的話,請從您的標題和問題中刪除「浮動」一詞,這只是讓人們對你所問的問題感到困惑。 – jfriend00

回答

0

到的圖像的頂部位置的字幕最簡單的方法是把圖像和標題中相同的包含分區,聲明容器作爲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; 
} 
0

你可以用浮動的CSS屬性的值。像這樣

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