Как я могу превратить этот пример в «2D» сетку слайдов, используя HTML5? - PullRequest
Новая
       4

Как я могу превратить этот пример в «2D» сетку слайдов, используя HTML5?

1 голос
/ 01 ноября 2011

Мне интересно, возможно ли адаптировать эту технологию HTML5 в 2D, чтобы, например, мы могли использовать клавиши со стрелками для навигации по сетке слайдов 3 на 3.

Если такНе могли бы вы указать источник?

Ответы [ 2 ]

2 голосов
/ 01 ноября 2011

Существует плагин, написанный давно: http://flesler.blogspot.com/2007/10/jqueryscrollto.html, который позволяет вам делать то, что вы хотите с JavaScript: http://demos.flesler.com/jquery/scrollTo/

Это краткое описание того, что вы могли бы сделать с этимПлагин: 

(function () {

  // find a current slide by whatever way you want, 
  // i.e. first slide or one that has some class or something...
  var container = $('.container'), 
      currentSlide = container.find('.slide:first');

  $(document).bind('keydown', function(e) {
    var code = e.keyCode || e.which;
    // 37 – left arrow
    // 39 - right arrow
    // 40 - down arrow
    // 38 - up arrow
    if ( code === 37 || code === 39 || code === 38 || code === 40 ) {
      e.preventDefault();

      switch ( code ) {
        case 37 :
          container.scrollTo ( currentSlide.prev(); );
          break;
        case 39 :
          container.scrollTo ( currentSlide.next(); );
          break;
        case 38 :
          container.scrollTo ( // implement finding one that is above );
          break;
        case 40 :
          container.scrollTo ( // implement findign one that is below );
          break;
    }
  });

} ());

Обратите внимание, что ваш контейнер должен иметь overflow:hidden и размеры, установленные на нем из CSS (или, конечно, вы можете сделать это из JS, если хотите).Вы можете найти все требования на странице плагинов.

1 голос
/ 01 ноября 2011

Google maps делают это давно.Карты Google на самом деле представляют собой огромные сетки, которые выходят далеко за пределы возможностей вашего экрана.Вы получаете достаточно, чтобы не столкнуться с отсутствующими.Когда вы закончите перетаскивание (вместо того, чтобы нажимать стрелки вправо / влево / вверх / вниз), он получает больше «плиток / слайдов / изображений» через AJAX, чтобы заполнить часть сетки, которая была перемещена.

...