Question

我想知道是否可以在2D中调整this HTML5 technology，例如我们可以使用箭头键来导航3乘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检索更多“图块/幻灯片/图像”，以填充已移动的网格部分。

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

2 个答案: