Не могу понять глюк. Фигня какая-то. [Версия для КПК]

Crowner

30-03-2005, 08:06

В общем, сделал, чтобы несколько слоев за курсором гонялись по экрану, каждый со своим отставанием. Только 2 проблемы не могу никак решить. Уже перепробовал всяко-разно. Все, сдаюсь... ПОМОГИТЕ !

1.Работает в Opera, но не работает в Explorer.
2.Работает по событию onmousemove. Но надо-то чтобы слои двигались, пока не догонят курсор. Решить хотел так:
Вместо window.onmousemove=move ставил window.onload=move
В конце описания функции ставил setTimeout ('move()',50)
Не работает ! После таких изменений, слои просто намертво прилипают и не двигаются...

Только что включил консоль JavaScript. Так вот, такую вещь она выдает:

"file://localhost/C:/pages/test.html
Timeout thread: delay 1000 ms
Error:
name: TypeError
message: Statement on line 9: toObject conversion
Backtrace:
Line 9 of inline#1 script in file://localhost/C:/pages/test.html
xx[0] = window.event.x;
Line 1 of unknown script
move();"

Собственно, сам листинг:

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
xx=new Array();
yy=new Array();
for (var i=50; i=0; i--)
{
xx[i]=0;
}
function move(){
xx[0]=window.event.x;
yy[0]=window.event.y;
for (var i=50; i>0; i--)
{
xx[i]=xx[i-1];
yy[i]=yy[i-1];
}
document.all["Layer1"].style.top = yy[10];
document.all["Layer1"].style.left = xx[10]+14;
document.all["Layer2"].style.top = yy[12];
document.all["Layer2"].style.left = xx[12]+26;
document.all["Layer3"].style.top = yy[14];
document.all["Layer3"].style.left = xx[14]+38;
document.all["Layer4"].style.top = yy[16];
document.all["Layer4"].style.left = xx[16]+50;
document.all["Layer5"].style.top = yy[18];
document.all["Layer5"].style.left = xx[18]+62;
document.all["Layer6"].style.top = yy[20];
document.all["Layer6"].style.left = xx[20]+74;
document.all["Layer7"].style.top = yy[22];
document.all["Layer7"].style.left = xx[22]+86;
document.all["Layer8"].style.top = yy[24];
document.all["Layer8"].style.left = xx[24]+98;
document.all["Layer9"].style.top = yy[26];
document.all["Layer9"].style.left = xx[26]+110;
document.all["Layer10"].style.top = yy[28];
document.all["Layer10"].style.left = xx[28]+122;
document.all["Layer11"].style.top = yy[30];
document.all["Layer11"].style.left = xx[30]+134;
document.all["Layer12"].style.top = yy[32];
document.all["Layer12"].style.left = xx[32]+146;
}
window.onmousemove=move;
</script>
</head>
<div id="Layer1" style="position:absolute; width:16; height:19; z-index:1; left: 60px; top: 39px;"><img src="gfx/p1.gif" width="16" height="19"></div>
<div id="Layer2" style="position:absolute; width:16; height:19; z-index:1; left: 87px; top: 42px;"><img src="gfx/p2.gif" width="16" height="19"></div>
<div id="Layer3" style="position:absolute; width:16; height:19; z-index:1; left: 112px; top: 41px;"><img src="gfx/p3.gif" width="16" height="19"></div>
<div id="Layer4" style="position:absolute; width:16; height:19; z-index:1; left: 141px; top: 43px;"><img src="gfx/p4.gif" width="16" height="19"></div>
<div id="Layer5" style="position:absolute; width:16; height:19; z-index:1; left: 170px; top: 45px;"><img src="gfx/p5.gif" width="16" height="19"></div>
<div id="Layer6" style="position:absolute; width:16; height:19; z-index:1; left: 195px; top: 39px;"><img src="gfx/p6.gif" width="16" height="19"></div>
<div id="Layer7" style="position:absolute; width:16; height:19; z-index:1; left: 223px; top: 48px;"><img src="gfx/p7.gif" width="16" height="19"></div>
<div id="Layer8" style="position:absolute; width:16; height:19; z-index:1; left: 248px; top: 54px;"><img src="gfx/p8.gif" width="16" height="19"></div>
<div id="Layer9" style="position:absolute; width:16; height:19; z-index:1; left: 281px; top: 55px;"><img src="gfx/p9.gif" width="16" height="19"></div>
<div id="Layer10" style="position:absolute; width:16; height:19; z-index:1; left: 308px; top: 51px;"><img src="gfx/p10.gif" width="16" height="19"></div>
<div id="Layer11" style="position:absolute; width:16; height:19; z-index:1; left: 336px; top: 50px;"><img src="gfx/p11.gif" width="16" height="19"></div>
<div id="Layer12" style="position:absolute; width:16; height:19; z-index:1; left: 361px; top: 50px;"><img src="gfx/p12.gif" width="16" height="19"></div>
</body>
</html>

slaine

30-03-2005, 16:52

Вот это работает у меня в explorere.

<html>
<title></title>
<head>
<script language = javascript>

var ball, ball2;
var speed = 0.04;
var speed2 = 0.03;
var aa;
var aaa;
var bb;
var bbb;
var mx = 0;
var my = 0;
var cy, cy2;
var cx, cx2;

function main(){
cy = document.getElementById("red").style.pixelTop;
cx = document.getElementById("red").style.pixelLeft;
ball = document.getElementById("red").style;

cy2 = document.getElementById("orange").style.pixelTop;
cx2 = document.getElementById("orange").style.pixelLeft;
ball2 = document.getElementById("orange").style;

speed = 0.04;
aa = cx;
aaa = cy;

speed2 = 0.03;
bb = cx2;
bbb = cy2;
asd();
}
function asd(){
aa = aa + (mx-aa) * speed;
aaa = aaa + (my-aaa) * speed;

bb = bb + (mx-bb) * speed2;
bbb = bbb + (my-bbb) * speed2;

cx = Math.round(aa);
cy = Math.round(aaa);

cx2 = Math.round(bb);
cy2 = Math.round(bbb);

ball.left = cx;
ball.top = cy;

ball2.left = cx2;
ball2.top = cy2;
setTimeout("asd()", 10);
}
function aaa(){
mx = event.x;
my = event.y;
}
document.onmousemove = aaa
</script>
</head>
<body onLoad = main()>

<span id="red" style="background-color: red; clip: rect(1px 5px 5px 0px); height: 8px; left: -10; position: absolute; top: -10; width: 4px"></span>
<span id="orange" style="background-color: orange; clip: rect(1px 5px 5px 0px); height: 8px; left: -20; position: absolute; top: -20; width: 4px"></span>

</body>
</html>