1

I am new to using JavaScript. How do I determine the float property (left / right) of an image? I think it would be something like this -

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

I am using the following Caption Overlay code from http://davemcmillan.net. Great overlay, I just need to be able to float the caption span with the image - left or right.

Thanks!

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

});
4

2 回答 2

0

您可以使用 css 属性获取 float 的值。像这样

var sideFloat = $(this).css('float');
于 2013-10-23T19:26:35.323 回答
0

将标题放置在图像顶部的最简单方法是将图像和标题放在同一个包含 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-23T19:06:09.070 回答