9

我有一个巨大的水平滚动网站。以马里奥世界为例。每个“资产”都是绝对定位的。

我希望项目的大小（高度和宽度）与浏览器的视口相关（因此使用百分比），但需要使用左侧的实际像素等来定位项目。

当我这样做时，很明显，当我调整浏览器窗口的大小时，资产的大小会正确调整。但是项目的位置是以像素为单位的，所以事情相对于背景会移动。

这个问题有简单的 CSS 解决方案吗？使用百分比来定义位置（例如左：50%）并不是一个很好的解决方案，因为它不是很准确（参见下面的 jsfiddle）。或者我应该使用 JS 查看 resize 事件并这样做？如果是这样，怎么做？

我不确定我现在是否有意义..所以如果有任何问题请告诉我。

编辑

这是一个 JSFiddle：http: //jsfiddle.net/BZ77t/

请注意，当您调整窗口大小时，黑色块 ( #blockpx) 使用像素定位，因此在调整大小期间不会受到影响。然而，红色块 ( #blockpercentage) 是使用百分比来调整大小和定位的，达到了我想要的效果：坚持预期的位置（即背景图像的位置）。然而，它并不是很准确——在这个例子中这并不重要，但是在更大的设置（更宽的宽度）中，差异变得相当大。

4

2 回答 2

3

解决方案是使用包含元素和 javascript 的组合：http: //jsfiddle.net/KaaXg/3/

这个小提琴包括这个 javascript 功能：

$(document).ready(function(){
    $(".container").css("width", $(".image").width());        
    $(window).resize(function(){
        $(".container").css("width", $(".image").width());        
    });
});

这里要注意的最重要的事情是，left值width是相对于body元素计算的，这是无意的。

为了解决这个问题，我们添加了一个包含元素，其中包含div用于页面上红色块图形的图像和其他标签。

但是，如果没有 javascript，在left调整窗口大小后重新加载页面时，该属性仍然只会“更新”。块级元素不会自行水平更新。

因此，您希望leftandwidth与背景图像成比例，但它们不会随着页面大小调整或仅使用 CSS 移动而更新。上面的 javascript 解决方案在页面调整大小时动态更新包含元素的宽度，解决了这个问题。

我单独留下了bottom和heightcss 样式，因为它们按照您网站的预期工作，容器的高度会增加以容纳其中的图像。

我不确定你想对页面上的固定像素黑色块做什么，所以我保持原样。

编辑：我认真地检查了这个项目，创建了一个对象工厂来创建新的图形并更新了页面的代码。这个解决方案几乎不需要 HTML 或 CSS，有更多的 javascript 代码，但会更容易在页面上实现动态图形/功能添加新元素。http://jsfiddle.net/RnCWN/9/

我在这里提出的 javascript 解决方案使用实时更新百分比来设置基于百分比的块的width和left属性，以及初始化静态height和bottom属性。

通过此版本，您可以使用该方法PercentageBasedGraphic在您的页面上创建一个浮动框。这是一个例子：

PercentageBasedGraphic(25, 10, 4, 30, "block1");

此函数将添加div带有id = "block1"属性的 a，以及相应width的 、height、left和bottom值（均以百分比表示）。它还返回一个对象，其中包含调整div刚刚创建的大小和重新定位所需的所有信息。您可以通过向每个div. 无论如何，我们最终如何使用我们返回的对象？

addGraphic(graphicArr, PercentageBasedGraphic(25, 10, 4, 30, "block1"));

该addGraphic函数将每个新的浮动框添加到一个数组中。稍后，我们在调整窗口大小时遍历这个数组以重新定位我们定义的所有浮动框。

老实说，超级马里奥的画面让这一切变得很有趣。

于 2013-02-26T16:41:22.690 回答
0

您可以尝试检查窗口的旧（调整大小之前）和新（之后）宽度和高度之间的差异，并使用此差异来更改底部和左侧位置：

$(document).ready(function(){
    var width = $(window).width();
    var height = $(window).height();
    var blockLeft = parseInt($('#blockpx').css('left'));
    var blockBottom = parseInt($('#blockpx').css('bottom'));
    $(window).resize(function(){
        var difWidth = width - $(this).width();
        var difHeight = height - $(this).height();
        if (difHeight>0) {
            $('#blockpx').css('bottom',blockBottom-difHeight + 'px');
        } else {
            $('#blockpx').css('bottom',blockBottom+difHeight + 'px');
        }
        if (difWidth>0) {
            $('#blockpx').css('left',blockLeft-difWidth + 'px');
        } else {
            $('#blockpx').css('left',blockLeft+difWidth + 'px');
        }
    });
});

试试jsfiddle。

它是一个 jquery 变体，你可以使用普通的 javascript 来做同样的事情。

于 2013-02-21T13:23:37.837 回答