Fahren Sie mit der obigen JavaScript-einfache Implementierung des Popup-Drag-Fensters (i) zum Lernen fort.
Das Folgende ist die spezifische Analyse des Codes:
Lassen Sie uns zunächst die Struktur bestätigen:
Schwimmendes Fenster: anfangs unsichtbar. Enthält die Titelleiste und die Inhaltsleiste mit Titelleisten und Schließen von Schaltflächen in der Titelleiste.
Maskenschicht: Am Anfang unsichtbar. Wird verwendet, um den durchscheinenden Hintergrund einzustellen, wenn das schwimmende Fenster auftaucht.
Schaltfläche: Es wird verwendet, um das schwimmende Fenster aufzunehmen.
Das Folgende wird ausführlich erklären
1. Um das Fenster frei zu bewegen zu lassen, sollte die Position des Fensters absolut sein;
/*Login Floating Layer Component*/. Popup {Anzeige: Keine; /*Erstes Verstecken*/ Breite: 380px; Höhe: Auto; /*Hohe Freiheit, weil es ungewiss ist, wie viel Inhalt ist. */ Grenze: 1px fest #d5d5d5; Hintergrund: #ffff; /*Der Fensterinhalt ist undurchsichtig, der Hintergrund ist weiß*/ Box-Shadow: 0 0 3px RGBA (0, 0, 0, 0,25); -moz-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); -Webkit-box-shadow: 0 0 3px rgba (0, 0, 0, 0,25); /*Das Inhaltsfenster ist beschattet*/ Border-Radius: 8px; /* Alle Ecken verwenden abgerundete Ecken mit einem Radius von 8px. Diese Eigenschaft ist eine CSS3-Standardeigenschaft*/ -moz-border-radius: 8px; /* Private Attribute von Mozilla Browser*/ -Webkit-Border-Radius: 8px; /* Private Attribute des Webkit -Browsers*//* Fenster abgerundete Ecken*/ Position: absolut; Oben: 100px; Links: 100px; /*absolute Positionierung*/ Z-Index: 9000; }2. Fügen Sie dem Fenster eine Titelleiste hinzu und setzen Sie den Mauszeiger der Titelleiste in die Form der Drag (Move) (beim Ziehen in Chrom wird der Cursor zum Textcursor und wird nach der Freigabe der Maustaste wiederhergestellt). Hier müssen Sie eine abgerundete Ecke für die oberen linken und oberen rechten Ecken der Titelstange einstellen.
/*Title Bar Area*/. Popup_title {Höhe: 48px; Zeilenhöhe: 48px; /*Mittlere vertikal*/ padding: 0px 20px; /*Einen bestimmten Abstand von links machen*/ Hintergrund: #f5f5f5; /*Hintergrundfarbe*/ Border-Bottom: 1PX Solid #efefefef; /*Unterer Grenze*/ Border-Radius: 8px 8px 0 0; /* Verwenden Sie abgerundete Ecken mit einem Radius von 5px im oberen linken und oberen rechten Ecken. Diese Eigenschaft ist eine CSS3-Standardeigenschaft*/ -moz-border-radius: 8px 8px 0 0; /* Privatbesitz von Mozilla Browser*/ -Webkit-Border-Radius: 8px 8px 0 0; /* Private Eigenschaften des Webkit -Browsers*//* Fenster abgerundete Ecken*/ Farbe: #535353; Schriftgröße: 16px; /* Schriftfarbe und Schriftgröße*/ Cursor: Bewegung; /* Beweglicher Stil*/ -moz-User-Select: None; / * Firefox alle */ -webkit-user-Select: Keine; /* Chrome All / Safari All / Opera15+* / -ms-User-Select: Keine; /* IE10*/ -khtml-user-Select: None; /* Early Browser*/ Benutzerauswahl: Keine; -O-User-Select: Keine; /* Die beiden oben genannten Attribute werden derzeit nicht unterstützt. Deshalb habe ich sie hier geschrieben, um Risiken zu reduzieren*/}Hier sind einige Wissenspunkte, die Sie verstehen müssen:
1. CSS3 (Border-Radius) Rand abgerundete Ecken
Border-Radius ist eine Abkürzungsmethode. Darüber hinaus sind die vier Werte in der Reihenfolge von oberen links, oberen rechten, unteren rechten, unteren linken und unteren links eingestellt. Die Hauptsituationen werden in folgenden Situationen auftreten:
1. Wenn es nur einen Wert gibt, sind die vier Werte von oberen links, oberen rechten, unteren rechten und unteren Links gleich.
2. Es gibt zwei Werte, dann ist der obere links gleich unten rechts, und der erste Wert wird genommen. Top-Right ist gleich unter unten links, und der zweite Wert wird genommen
3. Es gibt drei Werte, der erste Wert besteht darin, obere links einzustellen. Der zweite Wert ist zwar oben rechts und links und sie sind gleich und der dritte Wert besteht darin, unten rechts einzustellen.
4. Es gibt vier Werte, der erste Wert besteht darin, obere links einzustellen, und der zweite Wert ist oberhalb rechts, der dritte Wert unten-Rechts, und der vierte Wert besteht darin, unten links einzustellen.
Unterstützte Browser:
2. Cursor: Bewegung
Die Cursoreigenschaft gibt den angezeigten Zeigertyp (Cursor) an.
Wenn der Eigenschaftswert bewegt wird, bedeutet dies, dass das von diesem Cursor verwiesene Objekt beweglich ist, normalerweise ein Querpfeil, wie in der Abbildung gezeigt.
3.User-Select: Wird verwendet, um die Selektivität des Inhalts zu steuern
Auto-Default-Wert kann der Benutzer den Inhalt im Element auswählen
KEINE - Der Benutzer kann keinen Inhalt im Element auswählen
Text-Der Benutzer kann den Text im Element auswählen
Element - Text ist optional, jedoch nur innerhalb der Grenzen des Elements (nur von IE und FF unterstützt)
Es ist zu beachten, dass die Benutzerauswahl kein W3C-CSS-Standardattribut ist, und der Browser unterstützt es unvollständig und muss für jeden Browser angepasst werden.
Benutzerauswahl Beschreibung:
Setzt oder ruft ab, ob der Benutzer Text auswählen darf.
(1) IE6-9 unterstützt diese Eigenschaft nicht, sondern unterstützt die Verwendung des Tag-Attributs onSelectstart = "Falsch zurück." Um den Effekt der Benutzerauswahl zu erzielen: keine; Safari und Chrome unterstützen auch dieses Tag -Attribut;
.
(3) ein weiterer Wert von nicht wählbarer Wert ist aus; In anderen Browsern, wenn der Text auf -ms-user-select eingestellt ist: keine; In anderen Browsern kann der Benutzer nicht mit der Auswahl von Text im Textblock beginnen.
Wenn der Benutzer jedoch mit der Auswahl von Text in anderen Bereichen der Seite beginnt, kann der Benutzer weiterhin den Bereich Text auswählen, der den Text auf -ms-User-Select festlegt: None;.
Analysieren Sie den folgenden Code (Hinweis: Dieser Code und die Analyseergebnisse dieses Code stammen von W3Help):
<! DocType html> <html > nicht ausgewählbar = auf </div> <br/> <div style = "Hintergrund: #cc; -Webkit-User-Select: None;" > -Webkit-User-Select: Keine; </div> <br/> <div style = "Hintergrund: #cc; -moz-User-Select: None;" > -moz-user-Select: Keine; </div> <br/> <div style = "Hintergrund: #cc;" OnselectStart = "Falsch zurückgeben;" > OnselectStart = "Return false;" </div> </body> </html>
Die Effekte in jedem Browser sind wie folgt:
Hinweis 1: Der Inhalt kann deaktiviert werden.
Anmerkung 2: Es ist kein Inhalt zu untersagen, ausgewählt zu werden.
Es ist ersichtlich, dass die Methode zur Verbot der Inhaltsauswahl wie folgt lautet:
Dh für das Tag nicht ausgewählbar = "auf" festgelegt und die Tag -Methode setze OnselectStart = "Return Falsch;"
Firefox setzt private Stile für Tags -moz-User-Select: Keine.
Chrome Safari legt einen privaten Stil für das Tag -Webkit-User-Select fest: keine und legt die Tag-Methode auf, die onSelectStart = "Return Falsch;".
Opera set unauswählbar = "on" für Tags
Lösung
Setzen Sie Stile für Etiketten -moz-User-Select: None; -Webkit-User-Select: Keine gleichzeitig, setzen Sie nicht ausgewählt = "on", um sicherzustellen, dass alle Browser die Auswahl der Inhalte verbieten können.
Wenn Sie den verbotenen Auswahlstil im Fall auf die Titelleiste des schwebenden Unterschieds-Popup-Fensters einstellen, können Sie ihn so festlegen:
<div id = "popup_title" ungewählbar = "on"> log in <a href = "JavaScript: hidePopup ();"> </a> </div> an.
.popup_title {-moz-user-select: keine; / * Firefox alle */ -webkit-user-Select: Keine; /* Chrome All / Safari All / Opera15+* / -ms-User-Select: Keine; /*IE10*/ -khtml-user-Select: None; /* Early Browser*/ Benutzerauswahl: Keine; -O-User-Select: Keine; /*Die beiden oben genannten Attribute werden derzeit nicht unterstützt und hier geschrieben, um Risiken zu reduzieren*/}Hinweis: Dieser Artikel ist original, Adresse: http://www.cnblogs.com/wanghuih/p/5576910.html
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.