Effekt: Wenn Benutzer, die Windows -Systeme zum Herunterfahren verwenden, die Schnittstelle, die angezeigt wird, nur Benutzer ermöglicht, die Aktionen zum Herunterfahren zu wählen, sich anzumelden oder abzubrechen, während die Programme auf dem Desktop nicht verwendet werden können und der Bildschirm grau ausgegraut wird. Der Windows -Shutdown -Effekt ist in Abbildung 22.1 dargestellt.
Vorteile der Nutzung dieses Effekts auf Webseiten: Welche Vorteile haben die Nutzung dieses Herunterfahreneffekts auf Webseiten? Erstens sind nach dem Klicken auf einen Link die Aktionen, die dem Benutzer zu diesem Zeitpunkt nicht zur Verfügung stehen, im Hintergrund versteckt, und die verfügbaren Aktionen werden oben auf dem Bildschirm platziert und hervorgehoben, wodurch die Fehloperation des Benutzers vermieden werden kann. Zweitens kann das Hervorheben der Informationen auch Benutzer an Dinge erinnern, auf die geachtet werden sollte.
Prinzip: Das Prinzip, diesen Effekt auf einer Webseite zu erreichen, ist sehr einfach. Erstellen Sie zwei Ebenen, eine als Schattierungsschicht, die die gesamte Seite abdecken und in Grau angezeigt werden. Die andere Ebene dient als hervorgehobener Teil über der Schattierungsschicht, die durch Einstellen der Z-Index-Eigenschaft der Ebene eingestellt werden kann. Wenn der Abschalt -Effekt abgebrochen wird, löschen Sie diese beiden Ebenenelemente einfach auf der Seite.
Code:
<html>
<kopf>
<title> AJAX Shutdown -Effekt </title>
<styLetype = text/css>
#Lightbox {/*Diese Ebene ist eine Highlight -Ebene*/
Grenzrechte:#ffff1pxsolid;
Border-Top:#ffff1pxSolid;
Anzeige: Block;
Z-Index: 9999;/*Stellen Sie diese Ebene ganz oben auf der Webseite ein und setzen Sie sie groß genug*/
Hintergrund:#fdfce9;/*Hintergrundfarbe einstellen*/
Links: 50%;
Rand: -220px0px0px-250px;
Border-Links:#ffff1pxsolid;
Breite: 500px;
Border-Bottom:#ffff1pxSolid;
Position: absolut;
Top: 50%;
Höhe: 400px;
Text-Align: links
}
#Overlay {/*Diese Schicht ist eine Abdeckschicht*/
Anzeige: Block;
Z-Index: 9998;/*Stellen Sie den Boden der Highlight-Schicht*/ein
Filter: Alpha (Opazität = 20);/*auf transparent eingestellt*/
Links: 0px;
Breite: 100%;
Position: absolut;
Oben: 0px;
Höhe: 100%;
Hintergrundfarbe:#000;
Moz-Opacity: 0,8;
Deckkraft: .80
}
</style>
</head>
<body>
<Ahref = http: //www.baidu.comTarget=_BLANK> BAIDU </a>
<!-Diese Schicht ist eine Abdeckschicht->
<Divid = Overlay> </div>
<!-Diese Schicht ist eine Highlight-Ebene->
<divid = lightbox> <aRef =#onclick = javaScript: f ()> close </a> & nbsp; <aRef =#onclick = javaScript: f1 ()> Öffnen </a> </div>
</body>
</html>
<Script>
FunktionF ()
{
document.getElementById (Overlay) .Style.Display = None;
}
functionf1 ()
{
document.getElementById (Overlay) .Style.Display = Block;
}
</script>
HINWEIS: Wenn im IE -Browser ein <Select> -Tag gibt, kann das Tag nicht von der überschriebenen Ebene überschrieben werden, kann aber in anderen Browsern überschrieben werden. Abbildung 22.3 zeigt den Effekt des <Select> -Tags im IE -Browser und Abbildung 22.4 zeigt den Effekt des <Select> -Tags in Mozzilafirefox.
Abbildung 22.3 <Select> Tag im IE -Browser
Abbildung 22.4 Das <Selech> -Tag im Mozzilafirefox -Browser
Wenn Sie den IE -Browser verwenden, müssen Sie zuerst das Element <Select> auf der Webseite ausblenden. Beispielsweise kann der folgende Code verwendet werden, um alle <auswählen> Elemente der Seite auszublenden.
wählt = document.getElementsByTagName ('select');
für (i = 0; i <selects.length; i ++) {
wählt [i] .Style.vissibility = Sichtbarkeit;
}