1

建物にパーセンテージの効果を与えようとしています。そのため、画像の前にオーバーレイを配置して、ある種の持ち上げ効果を与えています。それは機能していますが、下から上ではなく上から下に進んでいます。オフセットを正しく参照するにはどうすればよいですか?

現時点での外観は次のとおりです

ここに画像の説明を入力

私のコードは次のとおりです。

<script>
$(document).ready(function() {
  overlay = $("#overlay");
img = $("#myimg");
img.load( function(){
  var myPercent = 30;
  overlay.width($("#myimg").width());
  var myHeight = $("#myimg").height() / 100 * myPercent;
  alert(myHeight);
  overlay.height(myHeight);
  overlay.css("top", img.offset().top + "px");
  overlay.css("left", img.offset().left + "px");
});
});

</script>

<div id="overlay" class="overlay"></div>
<img id="myimg" src="building.png" />

編集: http://jsfiddle.net/7vA9U/jsfiddle

4

1 に答える 1

1

オーバーレイに次の CSS を指定します。

#text-ovrelay {
    position: absolute;
    top: auto;
    bottom: 0;
}

このように、上ではなく下にドッキングされます。

編集:コードを取得し、少し変更しました。それをチェックしてください。

于 2013-08-12T12:32:13.633 に答える