7

iPhoneで見られるように、代わりにWebブラウザ内で「ページ全体をスライドさせる」というネイティブの移行と機能を模倣する方法はありますか？

1つのHTMLページをスライドさせ、ボタンを押した後に新しいHTMLページを配置したいと思います。

ボタンを一定にすることはできません。したがって、ボックス内でコンテンツをスライドさせるボタンを備えた一定のヘッダーがある場合、それは正しくありません。Webページ全体をスライドさせる必要があります。

HTML5で作成されたスライドは私が必要とするものでしょうか？よろしくお願いします！

編集：私はまた、2つのフルサイズのDIVを並べて設定し、1つを「overflow：hidden」でページから非表示にしてから、CSSトランジションを使用してボタンを押し、1つのDIVを画面から移動して他の1つが表示されますが、その方法がわかりません。

これに関する他の本当に難しい部分は、私のDIVコンテナが動的で、幅と高さが100％である必要があるということです。固定寸法は使用できません。

編集：

Ariel Fleslerによって開発されたscrollToおよびlocalscroll関数を使用して、私が探しているものの99％を完了することができました。しかし、開発の最後に、私は巨大な障害にぶつかりました。これが私がやろうとしていることを説明するのに役立つことを願っている画像です：

代替テキスト

私の問題は、メインコンテンツ領域がオーバーフローyオートを使用した固定位置であるため、ヘッダーとフッターの間にDIVのスクロールバーを保持できることです。ただし、問題は、ボタンを押してDIVのスライドアニメーションを開始すると、固定コンテンツ領域が移動せず、ヘッダーとフッターのみが移動することです。メインコンテンツ領域の位置を「相対」に変更すると、すべてが希望どおりに移動しますが、スクロールの位置が失われます。

誰かがこれを理解できれば、私はあなたに大いに感謝します！

（私は自分が持っているものへのリンクを投稿しますが、できません。それは会社の機密作業です）

前もって感謝します！！

編集 私はこのすべての情報のレビューに取り組んでいます。数日後に返信します。ご入力ありがとうございました！

4

9 に答える 9

6

私は現在、あなたに役立つかもしれない何かを開発しています。検討したdivを並べて使用しますが、スクロールバーの問題とブラウザーの違いにより、100％の幅を使用するのが難しいことがわかりました。クロスブラウザソリューション（IE7、IE8、FF、Chrome、Safari、Operaでテスト済み）を提供するjavascript（jQuery）で幅を設定することで、これを克服しました。

ソースを調べて、好きなだけソースコードを入手してください。何かを説明する必要がある場合は、お知らせください。

http://madesignuk.com/uploader/

PS個人サイトへのリンクの掲載に関するルールについては、100％確信が持てないので、モデレーターにとって問題がある場合はお知らせください。

PPSサイトは開発中ですので、私をからかわないようにしてください：p

于 2010-12-17T08:40:54.903 に答える
4

これを行うには、要素をコンテナ内に並べて配置しoverflow:hidden、内側の要素を移動するだけです。

これが概念実証です。ロード後のページのサイズ変更は処理しませんが、少なくとも原則を示しています。コンテナに3つのスライドを入れましたが、コードは動的であるため、好きな数を配置できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Page Slide</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

$(function(){
  var w = $(window).width();
  var h = $(window).height();
  var slides = $('.Slides > div');
  $('.SlideContainer').css({ height: (h-60) + 'px' });
  $('.Slides').css({ width: slides.length + '00%' });
  slides.css({ width: w + 'px' });

  var pos = 0;

  $('.Left').click(function(){
    pos--;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });
  $('.Right').click(function(){
    pos++;
    $('.Slides').animate({ left: (pos * w) + 'px' });
  });

});

</script>

<style type="text/css">

body { margin: 0; padding: 0; }

.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }

.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }

.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }

</style>

</head>
<body>

<div class="Header">
  absolutely positioned header
</div>

<div class="SlideContainer">
  <div class="Slides">

    <div class="Slide">
      <div class="Content">
        <h1>Slide 1</h1>
        <a href="#" class="Left">&laquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 2</h1>
        <a href="#" class="Left">&laquo;</a>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

    <div class="Slide">
      <div class="Content">
        <h1>Slide 3</h1>
        <a href="#" class="Right">&raquo;</a>
      </div>
    </div>

  </div>
</div>

<div class="Footer">
  absolutely positioned footer
</div>

</body>
</html>

編集

これでjsfiddleが再び起動したので、ここで試してみることができます：jsfiddle.net/9VttC

于 2010-12-24T12:32:42.317 に答える
1

LocalScrollを見たことがありますか？定義したコンテナ内ですべてのハッシュリンクをスクロール可能にします。ただし、スライドをフロートさせる必要があるため、スライドの幅を設定する必要があります。

于 2010-12-15T00:33:44.510 に答える
1

CSS属性を使用しscrollTopます：メインコンテンツ領域で100px下にスクロールしますか？ただそれをしなさい：

var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);

2行目はjQueryで構成されていますが、原則を覚えておいてください。新しいscrollTop値をmain_content_areadivのCSSに影響を与えます。

于 2010-12-18T14:30:49.970 に答える
0

JQueryCycleプラグインを試してください。

http://jquery.malsup.com/cycle/

彼らはたくさんのサンプルコードとチュートリアルを提供しているので、あなたがそれをあなた自身の方法で構築するのは簡単です。

于 2010-12-17T08:28:22.987 に答える
0

私が正しく理解していれば、scrollToメソッドは機能しますが、position：fixedをposition：relativeに変更した場合にのみ、スクロールバーがスクロールdivを超えて伸びる結果になりますか？

メインコンテンツ領域の周りにラッパーdivを配置し、ヘッダーを説明する上マージンとフッターを説明する下マージンを設定し、overflow：scrollを設定し、scrollTo関数を使用する方が簡単ではないでしょうか。その中で？

于 2010-12-17T21:44:44.240 に答える
0

Google Chromeチームは、この効果を持つブラウザとWebについて私が学んだ20のことを作成しました。

于 2010-12-17T21:54:05.903 に答える
0

理論的な例と同じですが、静的HTMLページを作成し、jQueryを使用してそれらからコンテンツをロードします（互換性を提供するため）。主な問題はスクロールです。

jQueryを使用してブラウザーの幅を計算し、それをの幅に設定してから、<body>を設定しoverflow: hiddenます。次に、絶対位置のコンテンツボックスを作成し、両方を同時にスライドさせます。

後でいくつかのコードを投稿しますが、これが私が最初に行うことです（私は、哀れなほど無能なJSフィドラーです）。

于 2010-12-17T21:54:19.357 に答える
-1

Coda Sliderのようなものを使用して、スライドのコンテンツをページ全体にすることができます。

于 2010-12-09T21:13:11.460 に答える