如何使用HTML5将此示例转换为“2D”幻灯片网格？

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;
    }
  });

} ());

请注意，您的容器需要具有overflow:hidden从CSS设置overflow:hidden和尺寸（当然，如果您愿意，您可以从JS执行此操作）。 您可以在插件页面中找到所有要求。

Answer 2

谷歌地图已经做了很长时间了。 Google地图实际上是巨大的网格，其扩展范围超出了屏幕可以处理的范围。 你得到足够的，这样你就不会遇到失踪者。 当您完成拖动（而不是单击右/左/上/下箭头）时，它会通过AJAX检索更多“图块/幻灯片/图像”以填充已移动的网格部分。