Jeder kennt allgemeine Navigationseffekte, wie z. B. die Verwendung von CSS zum Einrichten, Unterstreichen, Hintergrundfarben oder Verschieben von Navigationstexten. Im vorherigen Beitrag erwähnten einige Internetnutzer die Website http://www.tonta.com.cn/ , und ich fand, dass der Navigationseffekt auf der Homepage gut ist, obwohl der Blitz keinen sehr blendenden Effekt hat, aber relativ zart und sieht sehr gut aus.
Ich habe nichts zu tun und versuche, den gleichen Navigationseffekt in DW zu erzielen. Der Effekt ist wie folgt: http://vip.5d.cn/flood/daohang/1.htm .
Analysieren Sie zunächst die Zusammensetzung des Effekts. Wenn Sie mit der Maus darüber fahren, ändert sich der Hintergrund und das kleine Bild dreht sich. OK! Erwägen Sie die Verwendung von Bild tauschen (Bild umdrehen) + Hintergrundbild ändern (CSS-Definition) in DW, wodurch der Effekt erzielt werden sollte.
Bereiten Sie 4 GIF-Bilder vor:
Das Hintergrundbild, wenn die Maus darüber fährt (in FW kann Nimate problemlos den Verlaufseffekt erzielen. Die Transparenz dieses Bildes ändert sich allmählich von 0 % auf 100 %).
[img]/conimages/web/2003-06/bg0604.gif[/img]
Das Hintergrundbild, wenn die Maus herausgezogen wird (die Transparenz dieses Bildes ändert sich allmählich von 100 % auf 0 %).
[img]/conimages/web/2003-06/b0604.gif[/img]
dynamisches kleines Bild
[img]/conimages/web/2003-06/20604.gif[/img]
Kleines Standbild (stellen Sie das Bildformat in der Firmware auf GIF ein und speichern Sie es)
[img]/conimages/web/2003-06/2a0604.gif[/img]
1. Der Hintergrundeffekt wird mithilfe von CSS implementiert, um zwei Klassen zu definieren:
.style1 {background-image: url(bg.gif)}
.style2 {background-image: url(b.gif)}
wird für das Hintergrundbild verwendet, wenn die Maus darüber fährt und wenn die Maus herausgezogen wird. Fügen Sie dann den folgenden Code in die Zelle ein:
onmouseover="this.className=' style1'"
onmouseout="this.className='style2'"
kann den Effekt erzielen, dass der Hintergrundverlauf erscheint, wenn die Maus vorbeigeht, und verschwindet, wenn die Maus wegbewegt wird.
2. Mit dem Effekt „Bild umdrehen“ können Sie ein kleines statisches Bild in eine Zelle einfügen, mithilfe eines Verhaltens einen Bildaustauscheffekt hinzufügen und es so einstellen, dass es sich in ein dynamisches kleines Bild umdreht, nachdem die Maus darüber geführt wird.
Um einen näheren Effekt zu erzielen, müssen Sie den Flip-Image-Effekt auf die Zelle anwenden und den folgenden Code in den statischen kleinen Bildcode ausschneiden:
onMouseOver="MM_swapImage('Image2','','2.GIF', 1)"
onMouseOut="MM_swapImgRestore()"
wird in das TD-Tag des Zellcodes eingefügt.
Sie können das Bild umdrehen, wenn Sie mit der Maus über die Zelle fahren, wodurch ein dynamischer Effekt entsteht.
An diesem Punkt können alle Effekte erzielt werden.
In diesem Beispiel ist der mit dw erzielte Effekt fast vergleichbar mit dem mit Flash erzeugten Effekt oder sogar noch besser (wir haben den Effekt erzielt, dass der Hintergrundverlauf verschwindet, wenn die Maus die Zelle herauszieht).
Abschnitt:
1. Durch sorgfältiges Erstellen von Verlaufshintergrundbildern in FW (ich habe gerade zwei zufällige Verlaufsbilder erstellt) + durch Ändern der Navigationszellen kann der Effekt feiner und herausragender werden.
2. Wenn Sie diese Methode zum Erstellen von Navigationseffekten verwenden, müssen Sie mehrere Zellen verwenden. Beachten Sie, dass der Swap-Effekt nicht kopiert werden kann. Nach dem Kopieren des Codes müssen Sie zwei Codes ändern:
onMouseOver="MM_swapImage('Image3','',' 2.GIF' ,1)"
<img src="2a.gif" name="Image3" width="15" height="15" border="0" id="Image3">
Ändern Sie einfach den Namen des Flip-Bilds in einen anderen Wert.
3． Der technische Inhalt dieses Beispiels ist nicht sehr hoch; und ich bin mit Flash nicht sehr vertraut, daher weiß ich nicht, welches einfacher zu verwenden ist, DW oder Flash, aber ich erwähne es hier nur, um Ihnen eine Möglichkeit zu bieten Lösen Sie das Problem.
4. Die Überlagerung zweier einfacher Effekte kann einen cooleren Effekt erzeugen. Ich hoffe, dass dies für alle aufschlussreich ist. Wenn Sie animierte Hintergrundbilder erstellen, müssen Sie die Schleife der GIF-Animation auf „Nein“ einstellen Schleife (keine Schleife)
:) :)