Плавная прокрутка фрагментов изображения на большой сетке?

Давний слушатель, впервые звонящий сюда.

Хорошо, я прошу прощения за объем этого сообщения, но я хочу очень четко указать, что я пытаюсь сделать и что я пытался, чтобы помочь вам в ответах.

Цель: Я пытаюсь создать сетку из плиток (изображений) 100 x 100, и я буду отображать только часть сетки за раз, потому что изображения имеют размер 240 x 120. Нажимая кнопки (примечание: нет необходимости прокручивать мышью, масштабировать и т. Д. .), пользователь будет прокручивать по горизонтали и вертикали.

В качестве аналогии возьмем доску для шашек, установленную для игры, и вы смотрите на нее сверху вниз. Его было бы довольно просто отобразить, потребовав всего несколько базовых изображений и поместив их в сетку. Теперь учтите, что вы хотели показать только нижнюю 1/3 доски. Затем, когда пользователь щелкает вверх, он перемещает свой взгляд в середину, а следующий щелчок переносит его на верхнюю 1/3 доски. Это простой пример того, что я пытаюсь выполнить, за исключением гораздо большей сетки с меньшим просмотром / перемещением.

Что я пробовал:

1. Сначала я написал код на PHP, чтобы нарисовать полную сетку 100x100, и все выглядело великолепно
2. Затем я изменил код, чтобы фактически записывать файлы для каждого квадрата, сохраняя их как X-Y.png
3. Меня затянуло в мир инструментов карты и инструментов увеличения шрифта
4. У меня был частичный успех при написании собственного решения

Инструменты карты / Zoomify Fail:

Получив полную карту и фрагменты, я попытался выяснить, как, черт возьми, прокручивать только часть этого окна. Загорелась лампочка: «А что насчет того, что вроде как работают карты Google!» Именно тогда начались проблемы, и меня затянуло в кроличью нору, изучая все эти инструменты карты, которые действительно ни к чему не привели, потому что, попросту говоря, они, кажется, созданы только для отображения географических карт.

Однако в тот или иной момент меня привели к Zoomify, и я подумал, что это действительно может быть вариант. Первая проблема заключалась в том, что я не мог заставить его делать собственные плитки без одного снимка полного изображения, поэтому я пробовал каждую программу захвата экрана под солнцем, чтобы попытаться получить полный снимок моего браузера с полной сеткой, чтобы позволить zoomify сделать их. Скажем так, это не сработало, но я попробовал с уменьшенным размером. Это вроде сработало, но потеряло много качества, и я понял, что масштабирование даже не дает того, что мне нужно, потому что 1. прокрутка не такая плавная; и 2. эти изображения в конечном итоге будут содержать некоторые ссылки, связанные с их координатами X-Y, что означает, что мне нужно контролировать, сколько прокручивается каждый раз, когда будут нажиматься стрелки вверх, вниз, влево и вправо.

Моя не очень удачная попытка сделать это сам

Хорошо, затем я вернулся к основам и бросил сетку в DIV с overflow: hidden в CSS. Отлично, теперь у меня было окно.Однако я не хотел загружать все эти изображения сразу, поэтому я нарисовал только часть сетки в абсолютно позиционированных DIV с уникальными идентификаторами (например, Tile_1_1). Все это выглядело великолепно, но теперь мне нужно было создать впечатление, что вы прокручиваете сетку, когда нажимаете кнопки со стрелками, поэтому я бросил это в функцию javascript для этого. Я попросил javascript вычислить новые X и новые Y и поменять местами источник изображения для всех плиток, поскольку все они названы в соответствии с их координатами X / Y в сетке. Собственно, это полностью сработало, и теперь карта прокручивается. Проблема в том, что просто менять источники изображений немного нестабильно. Нет никакой иллюзии, что мы перемещаемся по этой сетке, так как контент просто меняется мгновенно. И ЭТО, мои друзья, мне нужна наша помощь.

В чем я ошибся? Был ли я на правильном пути с этой последней попыткой? Нужно ли мне полностью переосмыслить это или есть какое-то простое решение для более элегантного перемещения плиток, чем замена исходного кода?

Имейте в виду, что я неплохо освоился с php, css и т. Д., Но я никогда особо не тратил много времени на javascript, поэтому вам может потребоваться немного больше пояснений в этой области.

P.S. это было самое близкое, что я смог найти на этих досках, но так и не смог дать четкого ответа: Прокрутка / предварительная загрузка (стиль Google Maps) слоев HTML с помощью Ajax

Обновление: используемое решение

I понравились ответы как Кобби, так и псевдосаванта. Решение Pseudosavant действительно было моим союзником, позволив CSS выполнять большую часть тяжелой работы, однако я пошел с решением Кобби.Я думал, что это даст мне немного больше контроля, и поскольку я на самом деле использую ромбовидную сетку, я мог бы лучше обернуть ее голову (не говоря уже о том, что другая не обязательно будет работать).

Вот что я сделал. Я знаю, что код немного грубоват и нуждается в некоторой очистке, но, возможно, он может кому-то помочь.

Сначала мне нужно было найти взаимосвязь между осями X и Y, поэтому я нарисовал себе небольшую диаграмму.

Я быстро заметил, что большее количество X означало начало ромба как дальше влево, так и выше, чтобы получить правильные координаты в центре вида (начало, определяемое пользователем), а затем смещение по координатам 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
\n";
          echo "\t\t" . $x . "-" . $y . ".gif\">\n";
          echo "\t
\n";
       }
       $left = $left + 120;
       $top = $top + 60;
    }
$leftStart = $leftStart - 120;
$topStart = $topStart + 60;
}

Добавьте DIV вокруг этого с помощью overflow: hidden и дайте ему идентификатор (мой - #tileView) . Хорошо, теперь у вас есть ромбовидная сетка, нарисованная внутри вашего представления, и теперь нам нужно начать ее перемещать!

Так выглядит мой jquery. Извините, если нужно улучшить, я только вчера изучил JQuery и Ajax.

Ajax вызывает addImage.php, чтобы добавить новую строку в нужное место, и deleteImage.php, чтобы удалить строку, которая сейчас находится вне поля зрения (я обнаружил, что без удаления этих строк все стало работать довольно медленно).

При добавлении изображения вы просто определяете новую позицию и выходные данные для 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 .= "
\n";
        $left += 120;
        $top += 60;
    }
}

, затем просто выведите $ newTiles для использования в вашем сценарии.

Удаление аналогично, просто помещает в xml идентификаторы DIV для удаления, потому что в противном случае я не смог бы заставить each () работать.

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

    echo "\n";  
    echo "\n";  
    for($i = $xmin; $i <= $xmax; $i++) {
        echo "\t\n";
        echo "\t\tT" . $i . "_" . $y . "\n";
        echo "\t\n";
    }
    echo ""; 
}

Надеюсь, это кому-то поможет. Всем спасибо за идеи и поддержку!