javascript - 在大网格上平滑滚动图像 block ？

Question

很长时间的听众，第一次来这里。

好的，我为这篇文章的长度道歉，但我想非常清楚我正在尝试做什么以及我试图指导你的答案。

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

打个比方，拿一个设置用来玩的跳棋盘来说，你看不起它。显示起来非常简单，只需要几个基本图像并将它们放在网格上。现在，考虑您只想显示板的底部 1/3。然后，当用户向上单击时，他们将 View 移到中间，再单击一次，他们将移至板的顶部 1/3。这是我试图完成的一个简单示例，除了在具有较小 View /移动的更大网格上。

我试过的:

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

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

我陷入了 map 工具和缩放类型工具的世界

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

map 工具/缩放失败:

获得完整的 map 和图块后，我试图弄清楚如何仅滚动此窗口的一部分。一个灯泡熄灭了:“像谷歌地图那样做事怎么样!”那是麻烦开始的时候，我陷入了困境，研究了所有这些真正让我无处可去的 map 工具，因为很简单，它们似乎仅用于显示地理 map 。

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

我自己尝试这样做并不那么失败

好的，然后我回到了基础，我将网格放入一个带有溢出的 DIV:隐藏在 CSS 上。太好了，现在我有一个窗口。不过，我不想一次加载所有这些图像，所以我只在具有唯一 ID(例如 Tile_1_1)的绝对定位 DIV 中绘制了网格的一部分。这一切看起来都很棒，但现在我需要让您在单击箭头按钮时在网格中滚动，所以我将它放到了一个 javascript 函数中。我让 javascript 计算新的 X 和新的 Y 并交换所有图块的图像源，因为它们都以其在网格上的 X/Y 坐标命名。实际上，这完全有效，现在 map 正在滚动。问题是，仅仅改变图像源有点不稳定。我们不会错觉我们在这个网格周围移动，因为内容只是立即发生了变化。这就是我的 friend 需要我们帮助的地方。

我哪里做错了？我最近的尝试是否走在正确的轨道上？我是否需要完全重新考虑这一点，或者是否有一些简单的修复方法可以比交换源更优雅地移动瓷砖？

请记住，我已经非常擅长 php、css 等，但我从未真正在 javascript 上投入太多时间，因此您可能需要在该领域多做一些解释。

附言这是我能在这些板上找到的最接近的东西，但它从未真正得到明确的答案: Tile scrolling / preloading (Google Maps style) of HTML layers with Ajax

更新:使用的解决方案

我喜欢 Cobby 和伪学者的回答。 Pseudosavant 的解决方案真的是我的盟友，让 CSS 完成大部分的艰苦工作，但是我采用了 Cobby 的解决方案。我认为它会给我更多的控制权，因为我实际上使用的是菱形网格，我可以更好地将头环绕在它周围(不是说另一个不一定也能工作)。

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

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



我很快注意到，更多的 X 意味着在更左和更高处开始菱形以获得 View 中心的正确坐标(用户定义的起点)，然后通过 Y 坐标偏移以去除一些负向左并降低起点观点。

然后，绘制网格的 PHP 看起来像这样($xcoord 和 $ycoord 来自一个表单):

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

用overflow:hidden 在它周围扔一个DIV 并给它一个ID(我的是#tileView)。好的，现在您在 View 中绘制了一个菱形网格，现在我们需要开始移动它!

这就是我的 jquery 的样子。对不起，如果它需要改进，我昨天刚刚学习了 Jquery 和 Ajax。

<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>

ajax 调用 addImage.php 在正确的位置添加一个新行，并调用 deleteImage.php 删除现在不在 View 中的行(我发现没有删除那些行，事情开始运行得很慢)。

在添加图像中，您只需找出要添加到页面中的 html 的新位置和输出。例如部分可能看起来像这样(但根据移动设置变量然后通过循环):

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

然后只需回显 $newTiles 供您的脚本使用。

删除是类似的，只是在 xml 中放入要删除的 DIV ID，因为否则我无法让 each() 工作。

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

希望这可以帮助某人。谢谢大家的想法和支持!

Answer 1

这是我之前使用过的解决方案。

瓷砖应该是 <div>设置为 inline-block与 <img>在里面。通过 <div> 控制标题的宽度和高度. *重要的是 <div> 之间没有空格元素，否则瓷砖不会彼此相邻。

瓷砖应该在 #container <div>有 line-height 0. 容器应设置为瓷砖尺寸的一些倍数，因为瓷砖会自动换行。因此，根据容器的大小，20 个图块可能是 4x5 或 5x4。

#container应该在另一个 <div>与 overflow: hidden我称之为视口(viewport)。您可以滚动 #viewport使用 jQuery 和 .scrollLeft .scrollTop .

这是一个 jsfiddle 示例: http://jsfiddle.net/pseudosavant/b4hSV/