jQuery Grid Content Slider - PullRequest
Новая
       8

jQuery Grid Content Slider

1 голос
/ 31 октября 2011

Мне нужно создать сетку из 5 столбцов и 2 строк, чтобы отобразить «бесконечное» количество ячеек (добавится с помощью AJAX). У меня будут кнопки «Назад» и «Далее» по обе стороны сетки. Поскольку я буду добавлять контент на лету, он был похож на родительский DIV с фиксированным размером и скрытым переполнением с UL с фиксированной шириной и плавающими LI. Я бы «прокрутил», изменив верхнее поле. Я хочу, чтобы пользователь чувствовал, что он прокручивает влево / вправо, а не вверх / вниз.

У меня все получилось, но мне интересно, это лучший способ сделать это? Есть идеи?

Демо: http://jsfiddle.net/ytJ6Z/

HTML: 

<div>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

CSS: 

div {height: 100px; width: 100px; overflow: hidden;}
ul {list-style: none; padding: 0; width: 100px;}
li {height: 50px; width: 50px; float: left; }

Javascript / JQuery: 

function scroll(toLeft) {

var oldTop = parseInt($("ul").css("margin-top"));
var newTop;
var left;

if (toLeft) {
    newTop = oldTop - 100;
    left = -100;
}
else {
    newTop = oldTop + 100;
    left = 100;
}

$("ul").animate({
    marginLeft: left,
    opacity: 0
}, 500).animate({
    marginTop: newTop,
    marginLeft: -left
}, 0).animate({
    marginLeft: 0,
    opacity: 1
}, 500);
}
...