我怎样才能把这个例子变成一个“2D”？使用 HTML5 幻灯片网格？

Question

我想知道是否可以在 2D 中采用 这种 HTML5 技术，例如我们可以使用箭头键可在 3 x 3 幻灯片网格中导航。

如果有，能否指出来源？

Answer 1

很久以前写的一个插件：
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;
    }
  });

} ());

请注意，您的容器需要通过 CSS 设置 overflow:hidden 和尺寸（当然，如果您愿意，也可以通过 JS 进行设置）。您可以在插件页面找到所有要求。

Answer 2

谷歌地图长期以来一直在这样做。谷歌地图实际上是巨大的网格，远远超出了你的屏幕所能处理的范围。你得到的只是足够的，这样你就不会碰到丢失的东西。当您完成拖动（而不是单击右/左/上/下箭头）时，它会通过 AJAX 检索更多“图块/幻灯片/图像”以填充已移动的网格部分。