Natives JavaScript zum Erzielen von Folieneffekten

<Text>
 <h1>Einfache Animationsproduktion</h1>
 <p>Link-Sprungzielanzeige</p>
 <ol id="Liste">
 <li>
 <a href="list1.html" >Vorname</a>
 </li>
 <li>
 <a href="list2.html" >Zweite</a>
 </li>
 <li>
 <a href="list3.html" >Drittens</a>
 </li>
 </ol>
 <!--Dynamisch hinzugefügter Bildanzeigebereich>-->
<script src="script.js"></script>
</body>

ol{
 Polsterung links: 20px;
}
altes li{
 Anzeige: inline;
 Rand rechts: 10px;
}
#Sicht{
 Breite: 600px;
 Höhe: 200px;
 Position: absolut;
}
#Diashow{
 Breite: 200px;
 Höhe: 200px;
 Überlauf: versteckt;
 Position: relativ;
}

/*Geteilte Last*/
Funktion addLoadEvent(Spaß){
 var oldLoad = Fenster.onload;
 wenn(Typ von oldLoad != "Funktion"){
  window.onload = Spaß;
 }anders{
  fenster.onload = funktion(){
   alteLoad();
   Spaß();
  }
 }
}

/*EinfügenNach*/
Funktion insertAfter(neuerKnoten,alterKnoten){
 var parent = alterNode.parentNode;
 wenn(übergeordnet.letztesKind == alterKnoten){
  übergeordnetes Element.anhängenKind(neuer Knoten);
 }anders{
  parent.insertBefore(neuerKnoten,alterKnoten.nächstesGeschwisterelement);
 }
}

Funktion zeigen(){
 /* Abwärtskompatibilität */
 wenn(!document.getElementById) false zurückgibt;
 wenn(!document.getElementsByTagName) false zurückgibt;
 wenn(!document.createElement) false zurückgibt;

 /*Liste der Listen abrufen*/
 var Liste = document.getElementById("Liste");

 /*Bildanzeigebereich erstellen*/
 /*Äußeres Div*/
 var div = document.createElement("div");
 div.setAttribute("id","Diashow");
 /*Bild*/
 var img = document.createElement("img");
 img.setAttribute("id","ansicht");
 img.setAttribute("src","bild.jpg");
 img.setAttribute("alt","Bildvorschau");
 /*Fügen Sie die Funktion insertAfter() hinzu, um sicherzustellen, dass das div direkt nach der Liste steht*/
 einfügenNach(div,Liste);
 div.appendChild(img);

 /*Bind-Ereignis*/
 var a = list.getElementsByTagName("a");
 a[0].onmouseover = Funktion(){
  moveElement("Ansicht",0,0,10);
 };
 a[1].onmouseover = Funktion(){
  moveElement("Ansicht",-200,0,10);
 };
 a[2].onmouseover = Funktion(){
  moveElement("Ansicht",-400,0,10);
 };
}


/*Die Bedeutung der Bewegungs*-Parameter: die ID des Elements, in dem sich das Bild befindet; der Offset nach links, um den das Bild verschoben werden soll; der obere Offset; die Zeit*/
Funktion moveElement(elementID,links,oben,intervall){
 /* Abwärtskompatibilität */
 wenn(!document.getElementById) false zurückgibt;
 wenn(!document.getElementById(elementID)) false zurückgibt;

 /*Bild abrufen*/
 var img = document.getElementById(elementID);

 /*Bestimmen Sie, ob sich das aktuelle Element bereits in einer Animationsfunktion befindet*Ansammlung von Animationen verhindern*/
 wenn(img.moveNow){
  /* Lösche den Animationsstapel */
  : Lösche Timeout (img.moveNow);
 }

 /*Bestimmen Sie, ob das Element links und oben gesetzt ist*/
 wenn(!img.style.left){
  img.style.left = "0px";
 }
 wenn(!img.style.top){
  img.style.top = "0px";
 }


 /* Aktuelle Position des Bildes abrufen* Der zu diesem Zeitpunkt abgerufene Wert liegt im Zeichenfolgenformat vor. Verwenden Sie parseInt(), um die Konvertierung in eine Zeichenfolge zu erzwingen*/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.top);

 /*Vergleiche die aktuelle Position mit der Zielposition*/
 wenn(altLinks == links && altOben == oben){
  gibt true zurück;
 }

 /*Um das Benutzererlebnis zu gewährleisten, sollte die Bewegung bei großen Entfernungen schneller sein.*Bei kleinen Entfernungen kann sie langsamer sein.*Beurteilen Sie die Entfernung anhand der Entfernungsdifferenz und bewegen Sie sich jedes Mal um 1/10 der Entfernungsdifferenz.
 */
 /*Die Variable „dist“ wird verwendet, um die Distanz zwischen dem aktuellen Offset und dem Ziel-Offset zu speichern*/
 var dist = 0;
 wenn(altLinks < links){
  /*ceil() rundet auf, um Dezimalstellen und Zahlen kleiner als 1 zu vermeiden*/
  dist = Math.ceil((left-oldLeft)/10);
  altLinks = altLinks+Entfernung;
 }
 wenn (altesLinks > links) {
  dist = Math.ceil((altesLinks-links)/10);
  altLinks = altLinks - Abstand;
 }
 wenn(altesTop < top){
  dist = Math.ceil((oben-altOben)/10);
  altesTop = altesTop+dist;
 }
 wenn(altesTop > oben){
  dist = Math.ceil((altesTop-Top)/10);
  altesTop = altesTop - Vert;
 }

 /*bewegen*/
 img.style.left = altesLeft+"px";
 img.style.top = altesTop+"px";

 /*Funktion aufrufen*/
 var Ergebnis = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*Legen Sie die Funktion, die die Animation ausführt, als Attribut dieses Elements fest*/
 img.moveNow = setTimeout(Ergebnis,Intervall);
}

addLoadEvent(anzeigen);