2009-11-15 3 views
0

Я пытаюсь построить сайт, как http://justinouellette.com/. Единственная проблема здесь в том, что я запутался с кодом. Я бы хотел использовать JQuery вместо MooTools.Слайд между кадрами с помощью JQuery?

Может ли кто-нибудь быть ангелом и написать демо? Я хотел бы иметь возможность переключаться между фреймами с помощью гиперссылок. Кадр будет классом.

Спасибо!

ответ

0

Насколько я понимаю ваш вопрос, что вы хотите, это карусель, есть большой плагин JQuery под названием JCarousel, который вы можете использовать. Demo Here...

+0

Это не совсем то, что я ищу. Вы посмотрели сайт, который я представил в виде живой версии с закрытым исходным кодом? –

+0

, используя JCarousel, вы можете это сделать. Очевидно, что вам нужно будет сделать какую-то работу самостоятельно. –

1

jQuery plugin Cycle может это сделать, если вы задаете элементы (например, стрелка изображения в) для настройки опций next и prev.

Кому-то, кто недавно задал вопрос, был достигнут аналогичный эффект на их сайте (который вы можете увидеть, следуя the link in their question) с EasySlider 1.7.

Насколько занимает все окно, вы можете увидеть, что in Firebug сайт образец связал функцию к window.resize, refigure(), который устанавливает высоту и ширину каждого кадра до размера окна. Воплощение, что JQuery должно быть возможным - возможно, что-то вроде этого:

$(document).ready(function() { 
    $(window).resize(refigure()); 
}); 

и

function refigure() { 
    $('.frame').height($(window).height); 
    $('.frame').width($(window).width); 
} 

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

+0

Вот сделка, я бы хотел, чтобы это было так. У меня бы были разные классы, будь то «frame1», «frame2» и «frame3». 'frame2' и 'frame3' будут скрыты. Нажав на ссылку (например, «следующий»), она просто переместится на «кадр 2». Как и http://justinouellette.com. Извините за то, что я груб, я наткнулся на эту ссылку, которую вы опубликовали, и не понимал, как заставить ее скользить по всей странице. –

+0

Не обижайтесь, хотя я думаю, что дело скольжения по всей странице является проблемой css, например o.k.w. предлагает. Если у меня будет время, я посмотрю, смогу ли подтвердить это подозрение, посмотрев более внимательно на сайт ouellette. –

+0

@Jeff: +1 за усилие :) –

0

Это ближайший вне коробки Jquery плагин, который я могу найти, что близко к вашим потребностям: Step Carousel Viewer v1.8

Подробности на этой странице, вот то, что вы могли бы быть заинтересованы (каждый кадр/панель представляет собой класс CSS):

Пример Шаг Carousel HTML:

<div id="mygallery" class="stepcarousel"> 
    <div class="belt"> 

    <div class="panel"> 
     Panel 1 content here... 
    </div> 

    <div class="panel"> 
     Panel 2 content here... 
    </div> 

    <div class="panel"> 
     Panel 3 content here... 
    </div> 

    </div> 
</div> 

Хитрость в том, чтобы каждая панель занимает всю страницу, а кнопки шаговые плывут над ними. Я расскажу о проблеме с CSS. Удачи!

Смежные вопросы