JavaScript для мага


Показ движущихся объектов - часть 2


</layer>

 

<layer name="layer1" left=300 top=200 clip="100,100" bgcolor="#00ff00">

<font size=+1>Object 1</font>

</layer>

 

<layer name="layer2" left=500 top=200 clip="100,100" bgcolor="#ff0000">

<font size=+1>Object 2</font>

</layer>

 

</body>

</html>

 

Можно видеть, что в разделе <body> нашей HTML-страницы мы определяем три слоя. После того, как была загружена вся страница, при помощи программы обработки события onLoad, указанной в тэге <body>, вызывается функция init():

 

function init() {

  // define the 'dragable' layers

  dragObj[0]= document.layers["layer0"];

  dragObj[1]= document.layers["layer1"];

  dragObj[2]= document.layers["layer2"];

}

 

Массив dragObj влючает все слои, которые пользователь может перемещать. Каждый такой слой получает в множестве dragObj некий номер. Его мы рассмотрим попозже.

Можно видеть, что мы используем тот же самый код, что использовался ранее для перехвата событий, связанных с мышью:

 

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);

 

window.onmousedown= startDrag;

window.onmouseup= endDrag;

window.onmousemove= moveIt;

 

К функции startDrag() я добавил следующую сроку:

 

currentObj= whichObj(e);

 

Функция whichObj() определяет, по какому объекту был произведен щелчок. Возвращает она номер соответствующего слоя. Если ни один слой не был выделен, то возвращается значение null. Полученное значение хранится в переменной currentObj. Это означает, что из currentObj можно извлечь номер слоя, который в данный момент необходимо  перемещать (либо это будет null, если никакого слоя перемещать не надо).

 

В функции whichObj()для каждого слоя мы проверяем свойства left, top, width и height. По этим значеням мы и можем проверять, по которому из объектов пользователь щелкнул клавишей.

           




Начало  Назад  Вперед



Книжный магазин