Halo Codianer,

hat jemand einen Code um einen DIV Layer auf einer Webseite anzeigen zu lassen und durch einen Klick wieder unsichtbar zu machen.

Schön währe es noch zusätzlich den DIV Layer per Javascript in die Bildmitte "einfliegen" zu lassen.

Danke!

Das Div:

<!--Die folgende Zeile erzeugt ein Div mit dem Name "MeinDiv" das nicht sichtbar ist
(display:none)-->
<div id="MeinDiv" style="display:none;">....</div>

Das JavaScript:

function DivEinAusblenden(divName){
 //Gibt es das Objekt mit dem Namen der in divName übergeben wurde?
 if(document.getElementById(divName){
  /*"Sichtbarkeit" des Divs umschalten. 
  Wenn es sichtbar war, unsichtbar machen und umgedreht.*/
  document.getElementById(divName).style.display = 
   (document.getElementById(divName).style.display == 'none') ? 'inline' : 'none';
 }
}

Und dein Link der das ganze Umschalten kann:

<a href="javacript:;" onclick="javascript:DivEinAusblenden('MeinDiv');">Div Ein- und Ausblenden</a>

Im Prinzip wars das schon wenn man ein Div einfach nur ein und ausblenden will. Es gibt auch noch kürzer Schreibweise, aber der Code soll ja auch ein wenig selbsterklärend sein :D

Das mit dem "Einfliegen" eines Divs kann man verschieden lösen.
Wer möchte, kann das mit window.setIntervall lösen, eine JavaScript-Funktion mit der sich Code alle paar Milisekunden ausführen lassen würde.

var divPosition = 0;
var intervallId = 0;
function BewegeDiv(){
 //Gibt es das Objekt mit dem Namen der in divName übergeben wurde?
 if(document.getElementById("MeinDiv"){
  document.getElementById("MeinDiv").style.position='absolute';
  document.getElementById("MeinDiv").style.left=divPosition + 10;
  divPosition = divPosition + 10;
 }
 if(divPosition > 
     (document.body.clientWidth/2) - document.getElementById("MeinDiv").offsetHeight)
  window.clearIntervall(intervallId);
}
intervallId = window.setIntervall(BewegeDiv,100);

Die Funktion BewegeDiv wird nun alle 100 Milisekunden ausgeführt bis dein Div im Zentrum der Seite angekommen ist.

Alternative kann man auch JavaScript-Frameworks wie JQuery und Co verwenden. Diese stelle für solche zwecke Funtkionen zur Verfügung.

In JQuery könnte man das ganze mit der "animate"-Funktion bewerkstelligen.
Hier ein Beispiel aus der Documentation:

// Using multiple unit types within one animation.
    $("#go").click(function(){
      $("#block").animate({ 
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em", 
        borderWidth: "10px"
      }, 1500 );
    });

Da kann ich dir den Einsatz eines Frameworks wie z.B. jQuery ans Herz legen. Das unterstüzt genau das was du willst und du bist mit ein paar wenigen Zeilen fertig.

Schau einfach mal hier
Auch zu empfehlen sind die Tutorials

Ausblenden
Basiseffekte zum Einblenden
Das einfliegen könntest du z.B. über eins der zahlreichen plugins erledingen... einfach mal durchschauen :)

Folgender jQuery-Code lässt einen Div-Container (Layer) nach 5 Sekunden innerhalb von 1.5 Sekunden in die Mitte des Bildschrims fahren und blendet ihn beim Klick auf das "X" innherlab von 0.5 Sekunden wieder aus.

Javascript

layerWidth = 600;
layerHeight = 400;
$(document).ready(function(){ 
  $('#close').click(function() { 
    $('#layer').fadeOut(500);
  });
  window.setTimeout(function() {
    win = $(window);
    $('#layer')
      .css({
        'width': layerWidth + 'px',
        'height': layerHeight + 'px',
        'top': '0px',
        'left': '-' + layerWidth + 'px'
      })
      .animate({
        'top': win.height() / 2 - layerHeight / 2,
        'left': win.width() / 2 - layerWidth / 2
    }, 1500);
  }, 5000);
});

CSS

#layer {
  position: absolute;
  border: 1px solid red;
  background: yellow;
  left: -20000px;
  top: -20000px;
}

HTML

<div id="layer">
  <span id="close">X</span>
</div>

Damit der jQuery-Code ausgeführt werden kann, musst du in einem weitern Header das Framework einbauen. Herunterladen kannst du es hier.

Header-Beispiel (HTML)

<script type="text/javascript" src="jquery-1.3.2.js"></script>

kannst du über javascript lösen.
einfach dem layer ne id verpassen und dann über

document.getElementById('id').style.visibility = "visible";

bzw.

document.getElementById('id').style.visibility = "hidden";