Отображение перемещяющихся объектов

На предыдущих уроках Мы видели, что можно создавать перемещающиеся объекты с помощью слоёв. Теперь нашей задачей является регистрация объекта, на который нажал пользователь. Затем этот объект должен следовать за движениями мыши. Есть код для примера, показанного в начале этого урока:

var dragObj= new Array(); var dx, dy;

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

window.onmousedown= startDrag; window.onmouseup= endDrag; window.onmousemove= moveIt;

function startDrag(e) { currentObj= whichObj(e); window.captureEvents(Event.MOUSEMOVE); }

function moveIt(e) { if (currentObj != null) { dragObj[currentObj].left= e.pageX - dx; dragObj[currentObj].top= e.pageY - dy; } }

function endDrag(e) { currentObj= null; window.releaseEvents(Event.MOUSEMOVE); }

function init() { // define the 'dragable' layers dragObj[0]= document.layers["layer0"]; dragObj[1]= document.layers["layer1"]; dragObj[2]= document.layers["layer2"]; }

function whichObj(e) {

// check which object has been hit

var hit= null; for (var i= 0; i < dragObj.length; i++) { if ((dragObj[i].left < e.pageX) && (dragObj[i].left + dragObj[i].clip.width > e.pageX) && (dragObj[i].top < e.pageY) && (dragObj[i].top + dragObj[i].clip.height > e.pageY)) { hit= i; dx= e.pageX- dragObj[i].left; dy= e.pageY- dragObj[i].top; break; } } return hit; }

// --> </script> </head> <body onLoad="init()">

<layer name="layer0" left=100 top=200 clip="100,100" bgcolor="#0000ff"> <font size=+1>Object 0</font> </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>

Содержание Назад Вперед

Forekc.ru
Рефераты, дипломы, курсовые, выпускные и квалификационные работы, диссертации, учебники, учебные пособия, лекции, методические пособия и рекомендации, программы и курсы обучения, публикации из профильных изданий