Блог

редактировать: Я не хочу просто брать содержимое с разных страниц и загружать его на текущую страницу. Что я действительно хочу сделать, так это загрузить разные HTML-файлы, которые будут интерактивными в телевизоре. Я обнаружил, что это сложно сделать, потому что вы не можете загружать html-файлы в DIV и вы не можете нажимать на ссылки через прозрачный png-файл.

Здравствуйте,

Я создаю веб-сайт для телешоу, которое мы с моими друзьями вызываем каждый божий день.

здесь вы можете увидеть макет того, что у меня есть на данный момент: http://www.uvm.edu /~areid/cs195/final/S/S.html

на данный момент изображение, которое я использую, — это всего лишь одно большое изображение, которое я нарезал с помощью Photoshop.

Моя цель — использовать какой-нибудь скрипт, чтобы сделать так, чтобы внешний телевизор оставался на месте статически, а веб-контент внутри телевизора переходил без перезагрузки самого внешнего телевизора.

Я хотел объединить этот метод с чем-то похожим на скрипт fss slider, чтобы позволить каждой странице на сайте скользить, создавая впечатление, что это продолжение комнаты. -Возможно, это даже не лучший способ достичь желаемого результата.

У меня есть все мои изображения, нарисованные и нарезанные, все, что мне нужно сейчас, это некоторое направление в том, что именно искать, чтобы найти части, которые я ищу.

Большое вам спасибо, я рад, что присоединился к этому сообществу,

купер Рейд

Правка 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

Хорошо, посмотрите эту демонстрацию. Нажатие на правую сторону телевизора (где вы можете разместить несколько кнопок) приведет к прокрутке содержимого на экране. Когда вы дойдете до последнего раздела содержимого, следующий щелчок приведет к возврату в первый раздел содержимого. Я расположил содержимое так, чтобы фоновые разделы прокручивались за телевизионным изображением, а содержимое прокручивалось выше (чтобы вы могли щелкнуть по нему. Есть несколько других приемов, но посмотрите на это, и вы должны уловить идею.

Правка 2: http://jsfiddle.net/wdm954/pqAJK/3 / (Щелкните телевизор, чтобы увидеть переход. Здесь есть разделы содержимого вместо просто фонового изображения).

Редактировать: Посмотрите эту демонстрацию: http://jsfiddle.net/wdm954/pqAJK

Я бы сначала вырезал экранную часть телевизора и сохранил ее в формате .png с прозрачностью, чтобы вы могли видеть, что находится за экранной частью телевизора.

Затем вы можете добавить фоновое изображение и анимировать его с помощью jQuery, чтобы отобразить ту часть, которую вы хотели бы отобразить.

Я * лично не стал бы использовать какие-либо фрагменты, своего рода старомодный прием, когда у большинства людей не было высокоскоростных подключений.

1. Оберните все внутри внешнего телевизора в <div>
2. Создайте отдельные HTML-страницы, содержащие только HTML-код контента, который вы хотите разместить внутри телевизора.
3. Используйте метод AJAX get от jQuery, чтобы получить HTML для страницы без ее обновления.

например, ваше «одиночное» изображение находится в <td> с идентификатором «rightframe». Итак, при щелчке правой рамки вы можете захотеть получить html страницы с именем single.html и поместите это внутри телевизора (давайте предположим, что ваш <div> или <table> , у которого есть код, имеет идентификатор content ):

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

Редактировать: Для скользящей части вам пришлось бы создать две отдельные таблицы / divs бок о бок, одну для текущей страницы и одну для загружаемой страницы. Тогда вы могли бы использовать плагин jQuery, такой как Slidy http://www.wbotelhos.com/slidy для перехода между ними.

Лично я думаю, что было бы намного круче, если бы вы могли поместить анимированный GIF с изображением белого шума телевизора на телевизоре во время загрузки страницы 🙂

Что-то вроде следующего:http://jsfiddle.net/Vzdu7