1

JavaScript を使用するのは初めてです。画像のフロート プロパティ (左/右) を決定するにはどうすればよいですか? 私はそれがこのようなものになると思います -

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

});
4

2 に答える 2

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 に答える