4

我正在创建一个具有这种结构的网站：

其中红色框代表用户的浏览器窗口。当用户单击主页（底部）上的按钮时，它会向上滑动到新场景（例如平流层）。每个场景都是一个完整的图像。现在的问题是，我需要考虑使用不同屏幕尺寸的用户以及他们何时调整窗口大小。我已经查找了使用 CSS 或 JavaScript 调整背景图像大小的方法，但这对我来说效果不佳。我需要找到一些方法让它们都适合使用不同屏幕尺寸的每个人。我有一个想法-我知道这听起来很笨拙，但是编写一个将图像大小调整为 JS 给出的尺寸的 PHP 脚本是否可行？JS 找到浏览器窗口的大小，交给 PHP，PHP 返回 JS 需要的图像。当用户调整浏览器窗口大小时也会发生这种情况......

我怎样才能做到这一点？

更新：

我尝试了 SVG，它运行良好。但现在我想知道如何让其他元素符合 SVG？

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <!-- Date: 2012-08-01 -->
    <style type="text/css" media="screen">

     body { margin: 0px; }
     .area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }

    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {

       function scroll_to(id, speed, margin) {
         $('html, body').animate({
           scrollTop: $('#' + id).offset().top - margin
         }, speed);
       }

      var slide = 'a3'

       $(".area").height($(window).height());

       $(window).resize(function() {
         $(".area").height($(window).height());
         $(".area").width($(window).width());
         scroll_to(slide, 1, 0);
       }); 

       scroll_to('a2', 'slow', 0);

     });
    </script>
</head>
<body>

  <div class="area" id="a3">
    <h1>scene 3</h1>
  </div>
  <div class="area" id="a2">
    <h1>scene 2</h1>
    <div style="height: 100px; border: 1px solid black;" id="text">
     hi 
    </div>
  </div>
  <div class="area" id="a1">
    <h1>scene 1</h1>
  </div>

</body>
</html>
4

4 回答 4

2

为什么不使用 SVG 作为背景图像？你的场景看起来很简单。

除 IE ≤ 8 以外的所有浏览器都可以理解background: url(some.svg)：http ://caniuse.com/svg-css

于 2012-08-01T23:35:21.170 回答
1

使用一个大background-image的 . 用这样的东西设置它：

html, body {
    margin: 0;
    padding: 0;
    width: 100%
}
body {
    position: absolute;
    bottom: 0;
    height: 2000px;
    background-image: url('background.png')
}

然后使用 JavaScript 将 的bottom属性设置为body上移，如下所示：

window.addEventListener('keydown', keypressed, false);
function keypressed(e) {
    if(String.fromCharCode(e.charCode) == ' ') {
            document.body.style.bottom += parseInt(document.body.style.bottom) + 10 + 'px';
    }
}
于 2012-08-01T23:10:45.880 回答
0

恐怕重新调整背景图像的大小将是您最好的选择。您为什么不发布您已经为此类解决方案尝试过的代码，其他人可以从这个角度为您提供帮助。

于 2012-08-01T23:08:55.643 回答
0

您绝对应该将图像拆分为多个图像，每个选项卡一个。

我会这样做：http: //jsfiddle.net/4CwdX/3/

您无需调整图像大小。浏览器可以自动为您拉伸它background-size: 100%。

于 2012-08-02T00:25:44.030 回答