nicht angemeldet
Layer bewegen (Fortgeschrittene)
Bitte macht mit bei der Suche nach einem optimalen Code, besseren Lösungen dür dieses Problem:
Layer (LAYER,DIV,SPAN,ILAYER,IFRAME) ruckeln oder bewegen sich mit unterschiedlicher Geschwindigkeit trotz Zeitsteuerung.
Hallo,
wer schonmal versucht hat Layer browserübergreifend zu bewegen, hat bestimmt schon festgestellt, dass das u.U. zur starken Verlangsamung bei Opera, Netscape 6 und konqueror führt. JS 1.5 programmiert sich anders. Bei Opera und konqueror kommt hinzu, dass die auch document.all und document.layers kennen.
Hier mal eine einfache Lösung als Beispiel im Ansatz, wie mans besser machen könnte.
Zur weiteren Optimierung der Geschwindigkeiten könnte man hingehen und ein move-Befehl für jeden Layertyp schreiben. Dann fallen Rechenzeiten aus, besonders wichtig, wenn mehrere Layer gleichzeitig bewegt werden sollen und eine "Bremse" von Millisekunden sich zu einer Sekundenbremse hochaddiert. Auch der Aufruf von setTimeout bremst in sich selbst. Bei einem langsamen Rechner macht das schonmal 15 Millisekunden aus. Bei 30 Bewegungen sind das schon 450 Millisekunden, d.h. werden z.B. 2 Layer gleichzeitig bewegt, bremst das ganze schon um eine ganze Sekunde, bei 4 Layern sind das schon 3 Sekunden langsamer für die Operation.
ortelayer entspricht weitgehend der Funktion von document.getElementById. Hier nun der ausbaufähige Code. :
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<meta name="author" content="MichelM">
<meta name="copyright" content="http://iaweb.org"
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<script type="text/javascript" language="JavaScript">
<!--
/* Browsererkennung */
var ie4 = document.all? true : false;
var ns4 = document.layers ? true : false;
var w3c=document.getElementById&&!document.all?true:false;
if (navigator.appName.indexOf('Opera')==false){ie4=false;ns4=false;w3c=true;}
/* Ende Browsererkennung */
/* Daten */
var startzeit=new Date(); var mlk=0;var myLayer=new Array(); mypos=440;
var myNumber=0;var bewegungen=-1;
/* Ende Daten */
function ortelayer(Name){
myLayer=(ns4==true)?document.layers:(ie4==true)?document.all:document.getElementsByTagName("DIV");
if(document.all||document.layers){
for(i=0;i<=(myLayer.length-1);i++){
if(myLayer[i].name==Name){myNumber=i;}
}
}
else
{myNumber=myLayer.length-1;}
}//endFunction
function move(){
mypos+=200;
ausgabe=(ns4==true)?myLayer[myNumber].top=mypos:myLayer[myNumber].style.top=mypos+"px";
mypos-=229;bewegungen++;mlk++;
if (mlk<=30){dummy=(ie4==true)?setTimeout("move()",76):setTimeout("move()",55);}else {zeit=new Date();alert((zeit-startzeit)+"Zahl:"+bewegungen+" pro Bewegung: "+(parseInt((zeit-startzeit)/bewegungen)-10));}
}
//-->
</script>
<title></title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000" onload='ortelayer("test");move();'>
<DIV id="test" name="test" style="position:absolute;top:100px;left:100px;background-color:#336699;width:100pt;height:100pt;font-size:20pt;border:solid 2px black;" >hier</DIV>
</body>
</html>
_________________
What ever you want
hier bin ich Mensch,
hier schreib ich rein