JavaScriptを使用して静的ボーダー/Webページを互いにスライドさせることができます

StackOverflow https://stackoverflow.com/questions/5851684

質問

編集：さまざまなページからコンテンツを取得して、現在のページにロードしたくありません。私が本当にやりたいのは、テレビ内でインタラクティブになるさまざまなHTMLファイルをロードすることです。 HTMLファイルをDIVにロードできず、透明なPNGファイルを介してリンクをクリックできないため、これを行うことは困難であることがわかりました。

こんにちは、

私は、友人と私が毎日電話をかけるテレビ番組のためにウェブサイトを構築しています。

ここでは、私がこれまでに持っているもののモックアップを見ることができます。http://www.uvm.edu/~areid/cs195/s/s.html

現在のところ、私が使用している画像は、Photoshopでスライスした1つの大きな画像です。

私の目標は、何らかのスクリプトを使用してそれを作成することです。これにより、外部のテレビが静的に維持され、テレビ内のウェブコンテンツが最も外側のテレビをリロードせずに移行します。

この手法をFSSスライダースクリプトに似たものと組み合わせて、サイト上の各ページがスライドできるようにしたいと考えていました。 - おそらく、これは私の希望の結果を達成するための最良の方法でさえありません。

私はすべての画像を描いてスライスしています。今必要なのは、探している作品を見つけるために正確に検索するもののいくつかの方向です。

どうもありがとうございました、私はこのコミュニティに参加できてうれしいです、

クーパーリード

役に立ちましたか？

解決

編集5： http://jsfiddle.net/wdm954/pqajk/10/ （追加コンテンツを表示します。）

編集4： http://jsfiddle.net/wdm954/pqajk/7/

このデモには、特定のフレームへのパンニングが含まれます。

var h = $('.clickable div').height(); //height of a single content DIV
var divCount = 0;
$('.clickable div').each(function() { divCount++; }); //count number of content DIVs

$('.pan').click(function(e) {    
    e.preventDefault(); //prevent default action (of <a>)
    if ($('.content div').is(':animated')) return false; //disable click while animating
    var x = $(this).attr('href'); x = $(x).index(); //get index of destination element
    $('.content div').animate({top: -x*h +'px'}, 2000); //animate to destination
});

$('#tv-right').click(function() {

    if ($('.content div').is(':animated')) return false; //disable click while animating
    $('.content div').animate({top: '-='+h+'px'}, 2000); //animation

    //if last div then go back to the start
    if ($('.content div:last').css('top') == (-h * (divCount - 1)) +"px") {
        $('.content div').stop().animate({ top: '0px' }, 1000);
    }
});

編集3： http://jsfiddle.net/wdm954/pqajk/5/

OK、このデモをチェックしてください。テレビの右側をクリックすると（いくつかのボタンを置くことができる）、画面内のコンテンツをスクロールします。最後のコンテンツセクションに到達すると、次のクリックが最初のコンテンツセクションに戻ります。コンテンツを重ねたので、背景はテレビ画像の後ろにスクロールし、コンテンツは上にスクロールします（クリックすることができます。他にもいくつかのトリックがありますが、それを見て、アイデアを得る必要があります。

編集2： http://jsfiddle.net/wdm954/pqajk/3/ （テレビをクリックして移行を確認します。これには、背景画像だけでなくコンテンツDIVがあります）。

編集：このデモをチェックしてください： http://jsfiddle.net/wdm954/pqajk/

私は最初にテレビの画面部分を切り取り、透明性を備えた.pngを保存しているので、テレビの画面部分の後ろにあるものを見ることができます。

次に、背景画像を追加して、jqueryでそれをアニメーション化して、表示したい部分を眺めることができます。

私は個人的にはスライスを使用しません。ほとんどの人が高速接続を持っていなかったための古い学校のテクニックのようなものです。

他のヒント

  1. 外側のテレビ内にすべてを包みます <div>
  2. テレビ内で必要なコンテンツのHTMLを持っているばかりの別のHTMLページを作成します。
  3. 使用する jQueryのajax get method ページを更新せずにHTMLを取得します。

たとえば、「シングル」画像はaにあります <td> ID "rightframe"で。したがって、右frameがクリックされたら、single.htmlというページのHTMLを取得し、テレビ内に置くことをお勧めします（あなたを想定しましょう <div> また <table> コードにIDがあります content):

$('#rightframe').click(function() {
    $.get('single.html', function(data) {
      $('#content').html(data);
    });
});

編集：スライディングパーツの場合、2つの個別のテーブル/Divを並べて作成する必要があります。1つは現在のページ用、もう1つはロードされているページ用です。その後、SlidyのようなjQueryプラグインを使用できます http://www.wbotelhos.com/slidy/ それらの間を移行する。

個人的には、ページが読み込まれている間にテレビにテレビのホワイトノイズのアニメーションGIFを配置できれば、もっとクールだと思います:)

以下に沿って何か： http://jsfiddle.net/vzdu7/

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top