Окно Следующее изображение

Question

Я ищу, чтобы окно моей программы следовало за Марио img в диапазоне, а не прокруткой, по существу удаляя панель слайдов и как-то удерживая окно, ориентированное на символ Марио (как и любая 2D- прокрутка видеоигры). Любые идеи о том, как это сделать, используя jQuery или HTML?

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

EDIT: Было бы оптимально перемещать счетчик монет, кнопку воспроизведения музыки/паузы и все, что я добавляю в верхней части экрана с окном. Может ли контейнер div сделать это? Могу ли я просто использовать перемещение CSS для создания всех элементов в div?

Answer 1

Для этого я создал временную переменную moveAmount в моей moveMario функции, вычисленного расстояние между моим Марио img и переменных upperRange и lowerRange и переместил div, содержащую кнопку счетчика монет и воспроизведение музыки/пауз с помощью кода $("#id").animate({"left":"+=" + moveAmount + "px"},1);

Для перемещения фактического окна, я использовал ту же концепцию, но используется код window.scrollTo(lowerRange - (1/10)*winWidth, 0); (потому что lowerRange первоначально был определен как (1/10)*winWidth)

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

Просмотреть мой рабочий пример here!

Answer 2

Вы можете попробовать переместить всю страницу с помощью отрицательных полей и сохранить img после окна с помощью position: fixed.