Zunehmende Seitenhöhe mit Javascript

Ich weiß nichts über Javascript, aber ich möchte in der Lage sein, auf ein Bild zu klicken und die Seitengröße zu erhöhen.Zunehmende Seitenhöhe mit Javascript

Beispiel. Eine 500px x 500px Box mit einem Bild darin. Wenn Sie auf ein Bild klicken, wird das Feld auf 500 x 1000 Pixel mit neuem Inhalt innerhalb des neuen Bereichs erhöht, ohne dass die Seite geändert wird.

Wie würde ich das tun?

wie auf dieser Website http://kyanmedia.com/ Klicken Sie auf die Erde Wurm am Boden

Quelle

2009-06-06 Keiron Lowe

Wie "erhöht" es von 500x500 zu 500x100? –

100px ist kleiner als 500px ... Meintest du 1000px? – James

Um ja ich tat Lol Ich möchte es wie auf dieser Website http://kyanmedia.com/ Klicken Sie auf die Earthy Wurm an der Unterseite –

Sie ein Element haben kann unten am unteren Rand der Seite

<div id="extraDiv" style="display:none"> some extra stuff </div>

und mit Hilfe von Javascript, machen einen

document.getElementById("extraDiv").style.display = "block";

um die Seite länger zu machen. Wenn Sie eine Animation wünschen, können Sie jQuery, scriptaculous oder andere Javascript-Bibliotheken verwenden.

Quelle

2009-06-06 08:54:50

Sie könnten jQuery verwenden, um dies zu erreichen, die die coole Scroll haben würde, anstatt nur auftauchen. Haben Sie Hauptinhalt in einem div sind, dann wird der Inhalt wollen Sie in einem versteckten div zeigen, wie:

<div>Main Content</div> 
<div id="hiddenLab" style="display:none">Content to show</div>

Sie dann den jQuery slideToggle Befehl verwenden würde es nach oben und unten, so etwas wie:

<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#hidden").click(function(){ 
       $("#about").slideToggle("slow"); 
      }); 
     });  
    </script> 
    <style type="text/css"> 
     #maincontent { width:100%; height:100px;background:green} 
     #about { width:100%; height:1000px;display:none;background:red;} 
    </style> 
</head> 
<body> 
    <div id="maincontent"> 
     <a id="hidden" href="#">Click to see hidden</a> 
    </div> 
    <div id="about">Content to show</div> 
</body>

Quelle

2009-06-06 08:58:26 Fermin

Wohin der jQuery-Befehl gehen? In der CSS-Datei oder HTML? –

Der Befehl jQuery wird in Ihr Javascript eingefügt. jQuery ist nur eine Javascript-Bibliothek. Um den obigen Code zur Ausführung eines Elements (Bild, Link usw.) mit einem id = "earthWorm" zu erhalten, wird der obige Code auf den Klick dieses Elements ausgelöst. Schauen Sie sich diese Videos (http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/) für einen schnellen Überblick über jQuery an, wenn Sie interessiert sind, es ist wirklich einfach zu erlernen und Sie kann wirklich schöne Dinge damit machen. – Fermin

Ich kann das nicht zur Arbeit bringen. Das Skript lautet: Die HTML ist:

Und die CSS ist: #maincontent { width: auto; Höhe: 1000px; } #about { Breite: Auto; Höhe: 1000px; } Hilfe? –

Zunehmende Seitenhöhe mit Javascript

Antwort

Verwandte Themen