Движение изображения за курсором

Напишем сценарий, при выполнении которого за курсором мыши движется изображение. Сразу после загрузки изображения изображение с солнцем не находится в области видимости, затем оно медленно появляется и движется за курсором (рис. 14.10).

Листинг:

<html>

<head>

var pic

var axel=0.5

var realx

var realy

var ex=0

var ey=0

var x0

var y0

function Init()

{y0=document.all.cur.style.pixelTop

x0=document.all.cur.style.pixelLeft

pic=document.all.cur.style

axel=0.5

realx=x0

realy=y0

move()

}

function move()

{realx+=(ex-realx)*axel

realy+=(ey-realy)*axel

x0=Math.round(realx)

y0=Math.round(realy)

pic.left=x0

pic.top=y0

setTimeout('move()',100)

}

</script>

</head>

<h3 align=center>Движение изображения за курсором</h3>

ex=event.x

ey=event.y

</script>

<img src="1.jpg" border=0

id="cur" style="position:absolute; top:-30; left:-30;">

</body>

</html>

После загрузки страницы выполняется функция Init(), в которой определяются текущие координаты перемещаемого изображения. Функция Init() вызывает функцию move(), которая и выполняет основные действия. Через заданный промежуток времени определяются координаты курсора мыши, координаты изображения и вычисляются новые координаты изображения, движущегося за курсором. Скорость движения задается значением переменной axel. Если курсор мыши не перемещать, изображение приблизится к курсору, но положение изображения будет все время немного изменяться.