Es gibt viele verschiedene Technologien zur Verfügung, für die Gestaltung einer Webseite. Ein Stil Element in der Web verwendet wird, die Verwendung der Transparenz , die durch Einstellen eines Elements Opazität gesteuert wird. Ein Entwickler kann diesen Effekt aber eine Vielzahl von verschiedenen Mitteln, einschließlich der Nutzung der MooTools Rahmen zu erreichen. MooTools
MooTools ist ein JavaScript-Framework . JavaScript ist die primäre Skriptsprache des Web , es ist in der Lage komplexe Animationen oder einfache Web -Funktionalität. Das Ziel der MooTools ist eine vereinfachte Möglichkeit für Entwickler die Verwendung von JavaScript zu erstellen. Er behauptet, die Menge an Code ein Entwickler schreiben zu reduzieren, erlauben einfacher Cross-Browser- Kompatibilität und eine leichte, verlässliche Rahmenbedingungen .
Deckkraft Verwendet
Wenn Sie einstellen Deckkraft eines Elements , die du kontrollierst seiner Transparenz . Dies kann in einer Vielzahl von verschiedenen Arten genutzt werden , ein Entwickler kann wollen ein Bild der Deckkraft zu verringern, mehr Transparenz , um eine besser geeignete Hintergrundbild erstellen. Sie können auch die Deckkraft eines Bildes auf die Aktionen eines Benutzers beziehen, zum Beispiel, wenn ein Benutzer seine Maus über ein Bild , können Sie das Bild die Deckkraft zu verringern, um zu signalisieren, dass es ausgewählt wurde . Transparenz kann auch als Stil- Element verwendet werden. Die Bereitstellung einer Vielzahl von Ebenen Deckkraft auf einer Webseite verbessern können die Tiefe und das Gefühl des Endprodukts.
Einfache Deckkraft Effect
MooTools wurde entwickelt, um zu reduzieren die Menge an Code benötigt, um JavaScript Effekte zu produzieren , und Sie können die Deckkraft für jedes Bild in einer Webseite mit der Verwendung des MooTool der Bibliothek zu ändern. Durch die Schaffung einer "class" und mit dem "set "-Methode können Sie angeben, unterschiedlicher Deckkraft, die dann durch einfaches Identifizieren der Klasse in Ihren HTML- Image-Tag verwendet werden. Ein Beispiel für die MooTools Code ist unten :
window.addEvent ( ' domready ', function () { $
$ (' Opazität. ') Jeweils (function ( Myel ) { < . br>
MyEl.set ( ' Deckkraft ' , + MyEl.get ( 'rel ') '.') ;
});
});
< p > im obigen Beispiel haben Sie eine " Deckkraft " -Klasse erstellt und gezeigt, dass die Transparenz des Bildes wird sich ändern , wenn Sie die Bilder "rel " Tag einzustellen. Indem " window.addEvent ( ' domready ', function ( ) {" im Code, den Sie anweist, die Funktion mit dem Titel " Myel " zu feuern , wenn die HTML- Seite geladen wird. Dadurch wird sichergestellt, dass die Deckkraft ändern , sobald der Besucher wird kommt in Ihre Website zur Umsetzung der Opazität Änderung fügen Sie die folgende Zeile HTML -Code : .
Substitute " myImg.jpg " mit Ihrer Bilddatei. In diesem Beispiel " myImg.jpg " hat eine Deckkraft von 50 Prozent.
Deckkraft Zeichentrick
ein Weg, um die Transparenz zu verstärken ist, um es zu animieren. Verwenden MooTools Sie die Deckkraft eines Bildes auf , wie der Benutzer mit einem Objekt interagiert Basis einstellen. Mausereignisse sind die häufigste Art von Interaktion. Verwenden MooTools , können Sie angeben, dass Sie möchten die Deckkraft auf einer Ebene auf " mouseenter " (wenn der Benutzer den Mauszeiger über ein Objekt mouses ) und auf einer anderen Ebene " mouseleave " ( wenn der Cursor aus dem Objekt entfernt ) gefallen . Diese Art der Funktion in ähnlicher Weise umgesetzt wird auf eine einfache Deckkraft Wandel; . . ein " Klasse " und rufen Sie die Klasse in Ihrem HTML-Code Die Funktion verwendet dann Mausereignisse um des Bildes Deckkraft verändern
(function ( $ ) {
< p> window.addEvent ( ' domready ', function () { var
Opazität = 0,6 , toOpacity = 0,8 ; .
$ $ (' div.opacity ') set (' Deckkraft ' , Deckkraft ) addEvents ( {
mouseenter : function () {
this.tween ( " Deckkraft " , toOpacity ); }
,
. Diese Funktion zeigt an, dass das Fenster sollte zu einer Opazität von " 0.8" oder 80 Prozent zu ändern, wenn die Maus in das Fenster. Wie das erste Beispiel ( in Abschnitt 3) , die ursprüngliche Funktion eingestellt ist, laden , sobald der Browser-Fenster geöffnet, in dem wird durch " domready . " die " mouseenter "-Funktion weist jedes Bild mit einer Klasse von " Deckkraft ", um von " Deckkraft " auf " toOpacity . " die Werte für diese Variablen in der dritten Zeile des Codes gesetzt sind. durch die Anpassung dieser Zahlen Sie die Funktionen Deckkraft einstellen wird , wenn die Maus betritt oder verlässt das Bild .
