Могу ли я создать ползунок навигации с переменной высотой для его содержимого? - PullRequest
Новая
       14

Могу ли я создать ползунок навигации с переменной высотой для его содержимого?

0 голосов
/ 27 апреля 2009

Большинство людей хорошо знают эффект Coda Slider в наши дни, но даже с поиском в Google и поиском здесь я не смог найти свой ответ.

Вопрос Как создать навигацию в стиле Coda Slider, в которой используется горизонтальное скольжение / прокрутка , но адаптирует свою высоту во время анимации скольжения к высоте, необходимой для содержимого?

Например, первый «слайд» содержит только изображение (ширина 400 пикселей, высота 300 пикселей), но на следующем слайде содержится много информации, включая изображения, текстовый и видео контент общей шириной 400 пикселей и высотой 800 пикселей. Теперь создание контейнера высотой 800 пикселей для начала - это просто трата пространства для слайда 1, поэтому мне нужно динамически на основе высоты, необходимой содержимому отдельного слайда, изменить высоту контейнера слайда.

Возможно ли это? Может быть, где-то там есть учебник, и один из вас мог бы указать мне на это.

С точки зрения технологии, я вполне приспособлен к xHTML и CSS, но только к любителям jQuery и PHP. Хотя это не должно быть ограничением вашего ответа, имейте это в виду при объяснении.

Большое спасибо за чтение, Я с нетерпением жду ваших идей, решений и общего вклада.

Jannis

1 Ответ

0 голосов
/ 27 апреля 2009

Я недавно прокатился самостоятельно. Вот (надеюсь) полезная отправная точка.

Вот код моей «следующей кнопки». 

var canSlide = true;
$('.next').bind('click', function() {



            if (!canSlide) { return false } // prevent queuing up of multiple clicks

            $('.prev').fadeIn(500);

            canSlide = false;

            $('.testimonials-container').animate({ left: '-=1011px' }, 1000, function() { canSlide = true });            

            if (currentPane == totalPanes) {

                $('.next').fadeOut(500);
                canScroll = false;

            } else {
                currentPane++;


            }

Чтобы настроить его высоту, просто добавьте высоту к аргументу JSON анимации. Такие как 

.animate({left: '-=1011px', height: newHeight + 'px'})

И, конечно, вам понадобится немного JavaScript, чтобы понять, какой должна быть следующая высота!

...