Tutorial – Layer mit Javascript

In diesem Tutorial möchte ich euch zeigen, wie man ganz einfach einen eigenen Layer erstellen kann. Dieser wird von der linken Seite hineinfliegen und mit einem Klick verschwindet er wieder. Dazu werden nur ein paar Zeilen in HTML, CSS und Javascript benötigt.

HTML-Basis

Zuerst erstellen wir eine simple HTML Seite mit einem <div> Element, welches unseren Layer darstellt. Die Eigenschaft onload vom <body> starten ein Intervall, welches das Einblenden des Layers startet. Durch einen Klick auf den Link â€žschließen“ wird die Funktion close() aufgerufen.

&lt;html&gt;
      &lt;head&gt;
            &lt;title&gt;Meine Seite&lt;/title&gt;
      &lt;/head&gt;
      &lt;body onload="startInterval()" &gt;
            &lt;div id="Layer1"&gt;
               Layer1
               &lt;a href="javascript:close()"&gt;schlie&szlig;en&lt;/a&gt;
            &lt;/div&gt;
      &lt;/body&gt;
&lt;/html&gt;

<html>

<head>

<title>Meine Seite</title>

</head>

Layer1

<a href="javascript:close()">schließen</a>

</div>

</body>

</html>

Cascading Style Sheets

Folgenden CSS-Code fügen wir einfach in den <head> Bereich ein.

&lt;style type="text/css"&gt;
   #Layer1 {
      position: absolute;
      left: -200px;
      top: 100px;
      width: 200px;
      height: 200px;
      border: 2px solid black;
      background-color: red;
   }
&lt;/style&gt;

#Layer1 {

position: absolute;

left: -200px;

top: 100px;

width: 200px;

height: 200px;

border: 2px solid black;

background-color: red;

}

</style>

Durch die Eigenschaft position: absolute können wir mit Hilfe von left und top dem betroffenen Element eine Position relative zum Elternelement zuweisen, in diesem Fall ist dies <body>. Damit sich der Layer vom Hintergrund abhebt, wird eine andere Hintergrundfarbe gewählt und zusätzlich noch ein Rahmen.

JavaScript Funktionen

Mit Hilfe eines kurzen JavaScript-Codes können wir jetzt den Layer hineinfliegen lassen. Dieser Code muß auch wieder in den <head> Bereich eingefügt werden.

&lt;script type="text/javascript"&gt;
   var left=-200;
   var intervalid;
   function changePos(id){
      document.getElementById(id).style.left=left;
   }
   function moveIn(id){
      if(left&gt;=100){
         clearInterval(intervalid);
      }
      left+=5;
      changePos(id);
   }
   function close(id){
      document.getElementById(id).style.left=-300;
   }
   function startInterval(id){
      intervalid=setInterval("moveIn('"+id+"')",10);
   }
&lt;/script&gt;

var left=-200;

var intervalid;

function changePos(id){

document.getElementById(id).style.left=left;

}

function moveIn(id){

if(left>=100){

clearInterval(intervalid);

}

left+=5;

changePos(id);

}

function close(id){

document.getElementById(id).style.left=-300;

}

function startInterval(id){

intervalid=setInterval("moveIn('"+id+"')",10);

}

</script>

In Wirklichkeit fliegt der Layer nicht hinein, sonder es sieht nur so aus, weil wir alle 10 Millisekunden die Position des Layers minimal verändern. Die Variablen left und intervalid brauchen wir, um die aktuelle Position zu speichern bzw. um später den Aufruf unserer moveIn() Funktion wieder zu beenden. Die Funktion changePos(id) verändert einfach die CSS-Eigenschaft left des betroffenen Elementes und wird durch die Funktion moveIn() aufgerufen. Wenn der gewünschte Wert für die Variable left erreicht worden ist, werden die weiteren Aufrufe der Funktion gestoppt. Die Funktion close(id) versteckt einfach das Element mit der übergebenen ID.

Natürlich ist dieser Layer eine sehr simple Variante, aber weil es ein <div> Container ist, kann man damit so gut wie alles machen, was mit HTML möglich ist. Zum Beispiel können Bilder eingefügt werden oder ein richtiger Schließen-Button im rechten oberen Eck. Viel Spaß beim Experimentieren, falls ihr noch Fragen habt nutzt einfach die Kommentarfunktion.

Beispiel aus dem Tutorial
(Zum Speichern Rechtsklick und „Speichern unter“)

Suchbegriffe:

javascript layer, layer script, layer javascript, javascript layer erstellen, java layer, html layer tutorial, javascript layers, java script layer, layer mit javascript, js layer, layer java, layer javascript erstellen

6 Responses to “Tutorial – Layer mit Javascript”

Micha 19. Mai 2009
hey, ich bin gerade um modifizieren 😀
erstmal muss ich dir sagne, dass ding wirklich klasse ist! ich vermiss nur ne ipsperre bzw reloadsperre.. jemand ne ahnung, wie ich das realisieren kann ?
Antworten
devno 19. Mai 2009
Hallo Micha,
weil sich sicherlich mehrere Leute fragen, wie man so eine Sperre realisieren kann, habe ich gleich einen neuen Artikel darüber veröffentlicht. Ich hoffe du kommst damit zurecht.
Tutorial: PHP Ip Sperre ohne Datenbank
Viel Spaß beim Ausprobieren,
Roman
Antworten
Al 26. November 2009
Na endlich mal einer … Danke danke danke … Ist ja echt der Hammer wie schwer es ist so ein Script zu finden …
Wegen einer Ip Sperre und Random etc. würde ich allen empfehlen einfach OpenX zu nehmen und den Layer dort einzubauen. Dann gibts sogar Geo Targeting und x Einstellmöglichleiten Serverseitig. Gruss an alle die hier auch gelandet sind.
Antworten
Yakmo 15. Januar 2010
Hallo, danke dir für dieses Tutorial.
Aber ich würde echt empfehlen, den Layer nicht bei der Close Funktion auf -300 zu verschieben, sondern mit
document.getElementById(‚Layer1′).style.display = ’none‘;
zu stellen. Dann verschwindet es auch.
Antworten
Julian 26. Juni 2013
Danke, Danke, Danke!
Stundenlang nach so etwas gesucht 🙂
Antworten

devno.com

Bloggen – Internet – iPhone – Programmierung

Tutorial – Layer mit Javascript

Suchbegriffe:

6 Responses to “Tutorial – Layer mit Javascript”

Leave a Reply to Al