Координаты курсора мыши.
Как определить координаты курсора мыши? Это делается элементарно с помощью Javascript!
Пример: этот скрипт хранит текущие
координаты курсора мыши в переменных xpos и ypos и автоматически обновляет
их при перемещении курсора.
<script language="javascript1.2"><!--
var xpos;
var ypos;
function imouse(){
ypos=event.y+document.body.scrollTop;
xpos=event.x+document.body.scrollLeft;
}
document.onmousemove=imouse;
--></script>
Обратите внимание, что координаты отсчитываются от начала документа, а
не экрана. Это из-за того, что к event.x
и y мы прибавили document.body.scrollTop
и scrollLeft соответственно.
Ниже приведем пример того, что можно сделать с помощью этого и нескольких
других, уже известных нам приемов.
Пример: этот скрипт рисует мух, которые
сейчас вьются вокруг курсора мышки :-).
<script language="JavaScript"><!--
var amount=4;
var ypos=0;
var xpos=0;
ang1step=new Array();
ang1=new Array();
ang2step=new Array();
ang2=new Array();
radius=new Array();
wdt=new Array();
for (i=0; i < amount; i++){
document.write('<div id="planet'+i+'" style="position:absolute;top:0px;left:0px;');
document.write('width:32px;height:32px;font-size:2px;"><img src="fly.gif"></div>');
ang1step[i]=Math.random()*0.15+0.1;
ang1[i]=i;
ang2[i]=i;
ang2step[i]=Math.random()*0.05+0.005;
radius[i]=Math.random()*50+50;
wdt[i]=Math.random()*5+5;
}
function iMouse(){
ypos=event.y+document.body.scrollTop;
xpos=event.x+document.body.scrollLeft;
}
document.onmousemove=iMouse;
function flash(){
for (i=0; i < amount; i++){
ang1[i]+=ang1step[i];
ang2[i]+=ang2step[i];
var y1=radius[i]*Math.sin(ang1[i])/wdt[i];
var x1=radius[i]*Math.cos(ang1[i]);
eval('document.all["planet'+i+'"].style.top=ypos+x1*Math.sin(ang2[i])+y1*Math.cos(ang2[i]);');
eval('document.all["planet'+i+'"].style.left=xpos+x1*Math.cos(ang2[i])-y1*Math.sin(ang2[i]);');
if(ang1[i]>6.28){ang1[i]-=6.28;};
if(ang2[i]>6.28){ang1[i]-=6.28;};
}
setTimeout("flash()",50);
}
window.onload=flash;
--></script>
В заключение хотелось бы добавить, что определение координат мышки может
понадобится не только для чисто визуальных эффектов. Этот прием, например,
может пригодится для написяния on-Line игр на Javascript. |