JavaScript для мага


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


На предыдущих уроках мы видели, как с помощью слоев можно создать перемещающиеся объекты. Все, что мы должны теперь сделать - это определить,  по какому именно слою пользователь щелкнул клавишей мыши. И затем этот объект должен двигаться вслед за мышью. Итак, код примера, показанного в начале этого урока:

 

<html>

<head>

 

<script language="JavaScript">

<!--

 

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() {

  // задать 'перемещаемые' слои

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

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

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

}

 

function whichObj(e) {

 

  // определить, по какому объекту был произведен щелчок

 

  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>




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



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