Question

我不确定如何解释我到底想要什么（这也让谷歌变得非常困难），但是我想创建一个表格，每个单元格具有特定的宽度和高度（比方说40x40像素）

这个表格比视口大，所以需要一些滚动，但我不想要滚动条（这部分不是问题），而是一种将表格拖到“视口后面”的方法

为了使它更复杂，我需要能够将特定单元格居中并知道哪个单元格也是居中的（尽管我知道例如表格在左边：-520px;我可以计算出什么情况是）。

长话短说，我正在寻找像maps.google.com这样的外观和工作方式的东西，但后来又使用表格和单元格而不是画布或div。

Answer 1

您尝试实现的目标相对简单。您有一个容器div元素，position: relative; overflow: hidden通过CSS应用，内容设置为position: absolute。例如：

<div class="wrapper">
    <div class="content-grid">
        ... your grid HTML ...
    </div>
 </div>

然后您需要设置一些鼠标/触摸跟踪javascript，您可以在Stack Overflow或Google周围找到大量示例，它们会在mousedown或touchstart个事件中监控鼠标的位置，然后在一段时间间隔内重复测试，以查看指针所在的位置并更新content-grid左上角和左上角，直至mouseup或touchend。

您可以使用左侧和顶部的CSS过渡来平滑此动画。

棘手的一点是计算中心单元的位置。为此我建议计算一个中心区域，即容器元素中间的网格单元格大小（即40x40）。然后检查该区域内是否有任何网格单元当前超过1/4，并将其视为＆＃34; central＆＃34;元件。

以下是在包装器中定位网格内的单元格的基本示例：https://jsfiddle.net/tawt430e/1/

希望有所帮助！

Answer 2

首先看到我的问题投票结果让我感到有点失望。我可以想象stackoverflow对新人只是试图让他们的代码写在这里有很多问题，但这不是我问的。

无论如何，通过“你分享问题，你分享解决方案”，心态，我在tw_hoff的帮助下修复了代码，现在一切正常。它甚至将坐标保存在本地存储中，因此如果刷新页面，此示例HTML会使您保持在相同的位置。我添加了我使用的两个示例图像（将左边的图像存储为farm.png，将右边的图像存储为tile.png，与html页面相同的目录）。

实际代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Game map demo</title>
  <style>
      body { margin: 0; padding: 0; }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div id="map" style="position: absolute; overflow: hidden; width: 100%; height: 100%; background-color: darkgreen;">
    <div id="content" style="white-space: nowrap;">
    </div>
</div>

<script>
    for(i = 0; i < 20; i++) {
        for(j = 0; j < 20; j++) {
            var tile;

            if((i == 4 || i == 5) && (j == 2 || j == 3)) {
                tile = 'farm';
            } else {
                tile = 'tile';
            }

            $("#content").append('<div style="background: url(\'' + tile + '.png\'); width: 128px; height: 128px; position: absolute; margin-left: ' + (i * 128) + 'px; margin-top: ' + (j * 128) + 'px;"></div>');
        }
    }

    $("body").css("-webkit-user-select","none");
    $("body").css("-moz-user-select","none");
    $("body").css("-ms-user-select","none");
    $("body").css("-o-user-select","none");
    $("body").css("user-select","none");

    var down = false;
    var current_left = 0;
    var current_top = 0;

    if(localStorage.getItem("current_left") && localStorage.getItem("current_top")) {
        current_left = Number(localStorage.getItem("current_left"));
        current_top = Number(localStorage.getItem("current_top"));

        console.log(current_left);

        $("#content").css('marginLeft', (current_left) + 'px');
        $("#content").css('marginTop', (current_top) + 'px');
    }

    $(document).mousedown(function() {
        down = true;
    }).mouseup(function() {
        down = false;  
    });

    var cache_pageX;
    var cache_pageY;

    $( "#map" ).mousemove(function( event ) {
        if(down == true) {
            current_left += (-1 * (cache_pageX - event.pageX));
            if(current_left > 0)
                current_left = 0;

            if(current_left < (-2560 + $("#map").width()))
                current_left = (-2560 + $("#map").width());

            current_top += (-1 * (cache_pageY - event.pageY));
            if(current_top > 0)
                current_top = 0;

            if(current_top < (-2560 + $("#map").height()))
                current_top = (-2560 + $("#map").height());

            localStorage.setItem("current_left", current_left);
            localStorage.setItem("current_top", current_top);

            $("#content").css('marginLeft', (current_left) + 'px');
            $("#content").css('marginTop', (current_top) + 'px');
        }

        cache_pageX = event.pageX;
        cache_pageY = event.pageY;
    });
</script>

</body>
</html>

它仍然需要一些工作，当然还有很多工作要在游戏中实际使用，但这部分有效，我希望如果其他人可能有同样的问题并在stackoverflow上搜索它我的解决方案给他们推进正确的方向：）。

感谢那些帮助过的人！

包含可拖动表格的HTML全尺寸div

2 个答案: