Перемещение по плоскости страницы onclick
Подскажите, какой функцией воспользоваться для реализации следующего:
Весь сайт - одна страница, в отдельных ее частях присутствуют дивы с контентом. Необходимо чтобы при клике на ссылку вся страница плавно перемещалась в ту ее часть, где размещается соответствующий материал. В принципе можно все это сделать прыгая по классам, но вот каким образом добиться плавного перехода?? Заранее спасибо за идеи.. |
Основы программной анимации
Я так понял у вас огромная страница, и вам нужно ее скроллить в нужное место? В любом случае вам нужно анимировать какую-то величину, статья именно о том |
Вы правильно меня поняли.
Спасибо, сейчас посмотрю. |
Статья - супер, спасибо, но можем ли мы упростить данное решение путем перемещения по классам а не координатам?
В таком случае можно будет бесконечно (в разумных пределах) расширять поле страницы и добавлять новые точки, а не переписывать координаты в зависимости от количества добавленных блоков. |
Я такое не реализовывал, но как думаю это нужно делать:
Есть меню. К каждому элементу естественно привязан обработчик который должен скроллить к определенному блоку. И так каждый обработчик сначала должен вычислять координаты своего блока к которому он собирается скроллить, а потом собсна скроллить. так блоки можно будет менять местами, переставлять и добавлять. Я б какой нибудь интерфейс на JS написал перед тем как начать это делать, чтобы каждый раз в обработчике не писать строки отвечающие за вычисление координат. Чтоб связывать элементы меню с блоками было легко. Типа Scroller.assign(menuitem, target); Координаты элемента на странице |
Цитата:
1. Если у Вас на экране несколько графических элементов (например, размером 300x300), то управляя из javascript их координатами или даже скроллером плавного перемещения Вы не получите. Это будет рывками, с дерганием и мерцанием. Кроме того на некоторых компьютерах загрузка процессора будет доходить до 100%, что не всем понравится. Почему? Очевидно, потому что javascript-это интерпретатор, а не компилятор. И он выполняет перемещение на 1 px грубо говоря за 30 миллисекунд, а хотелось бы за 3 микросекунды. Другими словами "вылет реактивного самолета из-за угла" у Вас не получится (средствами Flash можно и в будущем, используя HTML5-Canvas). 2. Сколько всего предполагается элементов на странице? Попробуйте построить с помощью традиционных html-тегов <table><tr><td></td></tr></table> таблицу размером всего 1000 ячеек на 1000 строк. Броузер умрет. Но я всё же нашел способ как решать такую задачу. Но это - тема целой отдельной статьи... и будущий проект :) |
Часовой пояс GMT +3, время: 14:49. |