0

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

こんにちは、

私は、友人と私が毎日と呼んでいるテレビ番組のウェブサイトを構築しています。

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

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

私の目標は、何らかのスクリプトを使用して、外側のテレビが静的に固定され、テレビ内の Web コンテンツが最も外側のテレビをリロードせずに遷移するようにすることです。

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

私はすべての画像を描いてスライスしました。今必要なのは、探しているピースを見つけるために正確に何を検索するかについての方向性だけです.

ありがとうございます、このコミュニティに参加できたことを嬉しく思います。

クーパー・リード

4

3 に答える 3

0

次のようなもの: http://jsfiddle.net/Vzdu7/

于 2011-05-01T22:19:57.240 に答える
0
  1. 外側のテレビ内のすべてを<div>
  2. テレビ内で必要なコンテンツの HTML だけを含む個別の HTML ページを作成します。
  3. jQuery の AJAX get メソッドを使用して、ページを更新せずに HTML を取得します。

たとえば、「単一」の画像は、<td>ID「rightframe」の中にあります。したがって、rightframe がクリックされたときに、single.html というページの html を取得し、それをテレビの中に入れたいと思うかもしれません (あなたの<div>または<table>コードが ID を持っていると仮定しましょうcontent):

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

編集: スライド部分の場合、現在のページ用とロード中のページ用の 2 つの個別のテーブル/div を並べて作成する必要があります。次に、Slidy http://www.wbotelhos.com/slidy/のような jQuery プラグインを使用して、それらの間を移行できます。

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

于 2011-05-01T22:03:14.713 に答える
0

編集 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/

わかりました、このデモをチェックしてください。テレビの右側 (ボタンを配置できる場所) をクリックすると、画面のコンテンツがスクロールされます。最後のコンテンツ セクションに到達すると、次のクリックで最初のコンテンツ セクションに戻ります。背景の div が TV 画像の後ろにスクロールし、コンテンツが上にスクロールするようにコンテンツをレイヤー化しました (これで、クリックできるようになります。他にもいくつかのトリックが投入されていますが、よく見てみると、アイデアが得られるはずです。

編集 2: http://jsfiddle.net/wdm954/pqAJK/3/ (TV をクリックしてトランジションを表示します。背景画像だけでなく、コンテンツ div があります)。

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

最初にテレビの画面部分を切り取り、透明な .png で保存して、テレビの画面部分の背後にあるものを確認できるようにします。

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

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

于 2011-05-01T23:17:06.067 に答える