4

このような構造の Web サイトを作成しています。

赤いボックスはユーザーのブラウザ ウィンドウを表します。ユーザーがホーム (下) のボタンをクリックすると、新しいシーン (成層圏など) までスライドします。各シーンは全体像です。問題は、さまざまな画面サイズを使用しているユーザーと、ユーザーがウィンドウのサイズを変更するタイミングを考慮する必要があることです。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

大きいものを 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

画像は、タブごとに 1 つずつ、複数の画像に分割する必要があります。

これは私がそれを行う方法です: http://jsfiddle.net/4CwdX/3/

画像のサイズを変更する必要はありません。ブラウザは、 を使用して自動的に拡大できますbackground-size: 100%。

于 2012-08-02T00:25:44.030 に答える