Блог

Главная - Вопросы по программированию - Замена AJAX и прокрутка в сторону

Замена AJAX и прокрутка в сторону

#jquery #html #ajax #plugins #animation

#jquery #HTML #ajax #Плагины #Анимация

Вопрос:

Я смог найти множество способов загружать и заменять содержимое с помощью ajax и скрывать / показывать с помощью эффекта.

Но я ищу способ вставить новое содержимое в div, в то время как старое содержимое вынимается.

Я предполагаю, что для этого потребуется добавить загруженный контент после уже существующего контента, но как мне выровнять существующий / загруженный контент по горизонтали и прокрутить внутри div?

Есть предложения по хорошим плагинам?

Ответ №1:

Создать раздвижную панель относительно просто. Сначала вы создаете контейнер с фиксированной шириной, который скроет переполнение. Тогда у вас есть движущаяся панель с большой шириной, то есть 5000 пикселей, и внутренним содержимым, каждое из которых содержится в div.

HTML

 <div id="container">

    <div id="panel">
        <div>Content 1</div>
        <div>Content 2</div>
    </div>

</div>

CSS

 #panel div {
    width: 300px;
    border: 1px solid black;
    float: left;
    height: 350px;
}

#panel {
   width: 5000px;
}

#container {
    overflow: hidden;
    width: 302px;
}

jQuery

 $(document).ready(function() {

    $('#panel').delay(2500).animate({
        marginLeft: '-=302px'
    }, 500);

});

Мы сдвигаем левое поле панели на отрицательное значение, так что вся панель сдвигается влево на величину ширины содержимого, которое нужно переместить в поле зрения (в данном случае на 302 пикселя).

Доступна скрипка: http://jsfiddle.net/cMKbA/2

Ответ №2:

Я большой поклонник слайдера Nivo, расположенного здесьhttp://nivo.dev7studios.com .