Question

以下是我网站的网址

我需要航天飞机出现＆＃34;自然定位＆＃34;即在草的图像上方略高于786 x 1024以上的所有分辨率。然而，当草图像的宽度设置为100％时，高度是动态的。因此，梭子的底部值也是动态的。我最初尝试使用简单的css％值，但这没有帮助。

我目前的尝试使用JavaScript。以下是代码

<script>
    $(document).ready(function() {
    var grass = $( '#grass' );
    var grassHeight = grass.outerHeight() - grass.outerHeight()/100 * 74;
        $( '#shuttle_1' ).css("bottom",grassHeight);
    });
</script>

刚刚使用的初始脚本

var grassHeight = grass.outerHeight();

然而，它最终真的搞砸了。

所以，作为一个临时修复，我添加了计算74％的数学（这个解决方案我并不是真的想使用，因为它使用魔法数字），它似乎工作＆＃34;罚款＆＃34;在786 x 1024的Mozilla上，然而我在镀铬上以稍高的分辨率测试它（现在不能记住它，将检查特定的分辨率并尽快编辑这部分）。我是JavaScript的新手，并且考虑到在所有浏览器和解决方案中解决此问题的最佳做法

如果有人引导我解决这个问题，我真的很感激。我打开使用css，Javascript以及jquery。

Answer 1

我会在这里默默使用$ .position，

$("#Grass").position({
    of: $(shuttle),
    my: "top center",
    at: "bottom center"
});

将定位草的草顶线（其中心），在梭子底线的中心下方

Answer 2

为什么不开发一些可以应用于草图像的实际渲染值以调整放置的常量值。类似的东西：

让我们说草的图像是500px x 237px，但是草的高度只有158px - 如果我们希望梭子坐在草冠上，它需要从屏幕底部偏移158px - 158分237分（几乎神奇地）到.66667

由于这是一个固定的比例，我们可以使用.66667来计算任意大小的草图像从屏幕底部的偏移量，只要我们通过乘以高度和.6667知道草图像的尺寸。 / p>

$(function(){
   var OFFSET = .66667; //this value is our shuttle adjustment constant
   $( '#shuttle_1' ).css("bottom",($('#grass').height() * OFFSET)); //sets the bottom offset of the shuttle
   $( '#shuttle_1' ).css("left",(($('#grass').width()/2)-($( '#shuttle_1' ).width()/2))); //centers the shuttle
});

这是展示它的JSfiddle。

根据另一个元素的渲染高度设置元素的底部位置

2 个答案: