Javascript 在大网格上平滑滚动图像分幅？

长时间的听众，第一次打电话到这里

好的，我为这篇文章的篇幅感到抱歉，但我想非常清楚我正在尝试做什么，以及我试图引导你的答案

目标： 我正在尝试创建一个100 x 100的平铺网格（图像），我一次只显示部分网格，因为图像是240 x 120。通过单击按钮（注意：不需要鼠标滚动、缩放等），用户将水平和垂直滚动

作为一个类比，拿一个棋盘来说，它是用来玩的，而你正俯视着它。这将是非常简单的显示，只需要几个基本的图像，并把它们放在一个网格。现在，考虑一下，你只想显示板的底部1/3。然后，当用户向上单击时，他们会将视图移到中间，再次单击会将其移到板的顶部1/3。这是一个简单的例子，说明了除了在一个大得多的网格上和一个更小的视图/移动之外，我正在尝试完成的工作

我所尝试的：

首先，我用PHP编写代码来绘制完整的100x100网格，一切看起来都很棒

然后我修改了代码，为每个方块编写了文件，并将它们保存为X-Y.png

我被地图工具和zoomify类型的工具所吸引

我在写自己的解决方案时取得了部分成功

映射工具/缩放失败：

在得到完整的地图和平铺后，我试图弄清楚如何只滚动这个窗口的一部分。一个灯泡熄灭了：“谷歌地图是怎么做的呢！”就在这时，麻烦开始了，我被困在兔子洞里，研究了一下所有这些地图工具，这些工具真的让我一事无成，因为，很简单，它们似乎只用于显示地理地图

然而，我确实在某个时刻被引导到Zoomify，我认为这真的是一种选择。第一个问题是，我似乎无法让它在没有一张完整图像的情况下拍摄我自己的平铺，所以我尝试了太阳下的每个屏幕捕获程序，尝试用完整的网格拍摄我的浏览器的完整照片，让zoomify制作它们。我只是说，这不起作用，但我试着缩小尺寸。它有点工作了，但失去了很多质量，我意识到zoomify甚至没有真正实现我所需要的，因为1。卷轴不是那么平滑；二,。这些图像最终将包含一些与X-Y坐标相连的链接，这意味着我需要控制每次单击上、下、左、右箭头时滚动的量

我自己做这件事的尝试并不那么失败

好的，然后我回到了基础，我在一个DIV中加入了overflow：隐藏在CSS上。太好了，现在我有一扇窗户了。不过，我不想一次加载所有这些图像，所以我只在绝对定位的div中绘制了部分网格，并具有唯一的ID（例如Tile_1_1）。这一切看起来都很棒，但现在我需要让你在点击箭头按钮时在网格上滚动，所以我把它扔给了一个javascript函数。我让javascript计算新的X和Y，并交换所有瓷砖的图像源，因为它们都是根据网格上的X/Y坐标命名的。实际上，这完全奏效了，现在地图正在滚动。问题是，仅仅改变图像源有点不稳定。我们并没有幻想我们在这个网格中移动，因为内容只是在瞬间改变。我的朋友们，这就是我需要帮助的地方

我哪里出错了？我最近的尝试是否正确？我是否需要彻底重新思考这个问题，或者是否有一些简单的修复方法，可以比交换源代码更优雅地移动磁贴

请记住，我在php、css等方面做得很好，但我从来没有在javascript上投入过太多时间，所以您可能需要在这方面做更多的解释

顺便说一句，这是我在这些黑板上能找到的最接近的东西，但它从来没有得到一个明确的答案：

更新：使用的解决方案

我喜欢科比和伪萨凡特的答案。Pseudosavant的解决方案真的很适合我的盟友，让CSS做大部分的艰苦工作，但我还是选择了Cobby的解决方案。我想它会给我更多的控制，因为我实际上使用的是菱形网格，我可以更好地将我的头绕在它周围（不是说另一个也不一定工作）

这就是我所做的。我知道代码有点粗糙，需要一些清理，但也许它可以帮助一些人

首先，我需要找到X轴和Y轴之间的关系，所以我给自己画了一个小图表

我很快注意到，更多的X意味着从更左和更高的位置开始菱形，以获得视图中心的右坐标（用户定义的开始），然后偏移Y坐标以去掉一些负的左坐标并降低起点

然后，绘制网格的PHP如下所示（$xcoord和$ycoord来自一个表单）：

//绘制网格
//用Xcoord偏移leftStart和topStart
$leftStart=360-（$xcoord*120）；
$topStart=360-（$xcoord*60）；
//用Ycoord偏移leftStart和topStart
$leftStart+=（$ycoord*120）；
$topStart-=（$ycoord*60）；
对于（$y=1；$y（$ycoord-6）））{
//把图片放出来-这就是我需要的格式
回显“\t\n”；
回显“\t\t”。$x.-“$y..gif\”>\n”；
回显“\t\n”；
}
$left=$left+120；
$top=$top+60；
}
$leftStart=$leftStart-120；
$topStart=$topStart+60；
}

用overflow:hidden在其周围抛出一个DIV，并给它一个ID（我的是#tileView）。好了，现在在视图中绘制了一个菱形网格，现在我们需要开始移动它

这就是我的jqu

//draw the grid
//Offset leftStart and topStart by Xcoord
$leftStart = 360 - ($xcoord * 120);
$topStart = 360 - ($xcoord * 60);

//Offset leftStart and topStart by Ycoord
$leftStart += ($ycoord * 120);
$topStart -= ($ycoord * 60);

for($y = 1; $y <= 99; $y++) { //y min to y max
    $left = $leftStart;
    $top = $topStart;
    for($x = 1; $x <= 99; $x++) { //x min to x max
       //I only want to draw part of the square
       if(($x < ($xcoord + 6)  && $x > ($xcoord - 6)) && ($y < ($ycoord + 6)  && $y > ($ycoord - 6))) {
          //Put out the image - this is how i needed mine formated
          echo "\t<div class=\"move\" id=\"T" . $x . "_" . $y . "\" style='position:absolute; left:" . $left . "px; top:" . $top . "px;'>\n";
          echo "\t\t<img src=\"./<path to your image>" . $x . "-" . $y . ".gif\">\n";
          echo "\t</div>\n";
       }
       $left = $left + 120;
       $top = $top + 60;
    }
$leftStart = $leftStart - 120;
$topStart = $topStart + 60;
}

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#top").click(function(){
        var y = document.getElementById('ycoord').value;
        var x = document.getElementById('xcoord').value;
        $(".move").animate({"left": "-=120px", "top": "+=60px"}, 500);
        changeImg(x, y, 'up');
        $("#ycoord").val(parseInt( y ) - 1);
    });     
    $("#bottom").click(function(){
        var y = document.getElementById('ycoord').value;
        var x = document.getElementById('xcoord').value;
        $(".move").animate({"left": "+=120px", "top": "-=60px"}, 500);
        changeImg(x, y, 'down');
        $("#ycoord").val(parseInt( y ) + 1);
    });     
    $("#left").click(function(){
        var y = document.getElementById('ycoord').value;
        var x = document.getElementById('xcoord').value;
        $(".move").animate({"left": "+=120px", "top": "+=60px"}, 500);
        changeImg(x, y, 'left');
        $("#xcoord").val(parseInt( x ) - 1);
    });
     $("#right").click(function(){
        var y = document.getElementById('ycoord').value;
        var x = document.getElementById('xcoord').value;
        $(".move").animate({"left": "-=120px", "top": "-=60px"}, 500);
        changeImg(x, y, 'right');
        $("#xcoord").val(parseInt( x ) + 1);
    });

function changeImg(x, y, move){
    $.ajax({
        type: "POST",
        url: "addImage.php",
        data: 'x=' + x + '&y=' + y + '&move=' + move,  
        cache: false,
        success: function(html){
            $(html).appendTo($("#tileView"));
        }
    });
    $.ajax({
        type: "POST",
        url: "removeImage.php",
        data: 'x=' + x + '&y=' + y + '&move=' + move,  
        cache: false,
        success: function(xml){             
            $("removeTile",xml).each(function(id) {    
            removeTile = $("removeTile",xml).get(id);
            removeID = $("tileID",removeTile).text();
            $("#" + removeID).remove();
        });
        }
    });
}
});
</script>

if($_REQUEST["move"] == "up") {
    $xmin = $x - 5;
    $xmax = $x + 5;
    $y = $y - 6;

    $left = 360;
    $top = -360;

    for($i = $xmin; $i <= $xmax; $i++) {
        $id = "T" . $i . "_" . $y;
        $newTiles .= "<div class='move' style='position:absolute; left:" . $left . "px; top:" . $top . "px;' id='$id'><img src='./Map/TileGroup1/1-$i-$y.gif'></div>\n";
        $left += 120;
        $top += 60;
    }
}

if($_REQUEST["move"] == "up") {
    $xmin = $x - 5;
    $xmax = $x + 5;
    $y = $y + 5;

    echo "<?xml version=\"1.0\"?>\n";  
    echo "<response>\n";  
    for($i = $xmin; $i <= $xmax; $i++) {
        echo "\t<removeTile>\n";
        echo "\t\t<tileID>T" . $i . "_" . $y . "</tileID>\n";
        echo "\t</removeTile>\n";
    }
    echo "</response>"; 
}