Возможно использовать javascript для создания статической границы / перемещения веб-страниц между собой. - PullRequest
Новая
       10

Возможно использовать javascript для создания статической границы / перемещения веб-страниц между собой.

0 голосов
/ 02 мая 2011

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

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

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

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

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

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

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

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

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

Купер Рейд

Ответы [ 3 ]

0 голосов
/ 02 мая 2011

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

0 голосов
/ 02 мая 2011

Редактировать 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/ (Нажмите на телевизор, чтобы увидеть переход. В нем вместо содержимого фона есть div с содержимым).

Редактировать: проверить это демо: http://jsfiddle.net/wdm954/pqAJK/

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

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

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

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

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

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

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

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

...