Перемещение объектов на языке javascript

Перемещение элементов страницы при помощи языка javascript

Разрешено бесплатное использование скрипта и его модификаций в некоммерческих целях. Использование скрипта в коммерческих целях без разрешения автора запрещено.

Срипт для анимации движения объектов опубликован и доступен для скачивания здесь.

Подробное описание скрипта:

Подключаем скрипт на страницу:

<script src="js/move.js"></script>

Применяем функцию move(id, object, fn), где:

id: [String | HTMLelement] - Идентификатор элемента или ссылка на HTML элемент

fn: [Function] - Функция выполняемая по завершению перемещения

object: [Object] - Объект, описывающий перемещение элемента.

Свойства объекта:

x: [Number] - Координата х или смещение по координате x, куда требуется выполнить перемещение

y: [Number] - Координата y или смещение по координате y, куда требуется выполнить перемещение

v: [Number] - Скорость перемещения

a: [Number] - Ускорение перемещения

Position: ["absolute" | "relative"] - Система координат абсолютная или относительная

Пример подключения функции для работы в абсолютных координатах:

<script src="js/move.js"></script>

<div onclick="move('moved',{'x':300,'y':200,'v':100,'position':'absolute'},function(){alert('объект перемещён')}">
<div id="moved" style="position:absolute"></div>
</div>

Пример работы функции
Кликните на серое поле:

Пример использования функции для работы в относительных координатах:

<script src="js/move.js"></script>

<div onclick="move('moved',{'x':100,'y':200,'v':50,'a':200,'position':'relative'})">

<div id="moved"></div>
</div>

Пример работы функции
Кликните на серое поле:

Можно использовать функцию без указания свойства position:

<script src="js/move.js"></script>

<div id="moved" onclick="move('moved',{'x':100,'y':200,'v':50,'a':200})"></div>

Пример работы функции
Кликните квадрат:

в этом примере функция вызывается дважды, сначала с положительным ускорением, затем с отрицательным.
move('moved2',{'x':0,'y':50,'a':200},

function(){

move('moved2',{'x':0,'y':50,'v':200,'a':-300})

}

)

Можно пробовать разные комбинации для достижения разных эффектов.

Описание объекта Move

Свойства:
element:[HTMLelement] Ссылка на HTML элемент

x:[Number] Текущая координата X
y:[Number] Текущая координата Y

v:[Number] Скорость

a:[Number] Ускорение

position:[String] Позиционирование
dt[Number] Период обновления анимации

fn:[Function] Функция срабатывающая по загрузке окна
arg:[Array] Аргументы функции срабатывающей по завершению загрузки окна

Методы:

margin()

Метод возвращает объект со свойствами элемента margin:
top - отступ сверху
left - отступ слева

padding()

Метод возвращает объект со свойствами родительского элемента padding:
top - отступ сверху
left - отступ слева

client()

Метод возвращает объект со свойствами браузера и документа:
scrollTop - прокрученная клиентская область сверху
scrollLeft - прокрученная клиентская область слева

move()
Метод перемещает элемент