Ideen und Implementierungscode für Popup-Boxen auf der Seite von Webseiten, erstellt durch Javascript_Javascript-Kenntnisse

Es ist das Wochenende. Ich habe das Gefühl, dass ich etwas gelernt habe, aber ich habe das Gefühl, dass ich morgen nicht viel gelernt habe.

Bilder wie dieses kennt jeder:

————————————

Heute analysieren und erstellen wir zunächst die Eigenschaften dieser Popup-Box:

* Immer am Seitenrand befestigt

* Ändert die Position nicht, wenn die Seite nach oben zeigt fällt

* Wenn die Maus darüber fährt, werden detaillierte Informationen angezeigt. Beim Verlassen wird der ursprüngliche Zustand wiederhergestellt

Auf diese Weise können wir uns grob mehrere Funktionen vorstellen, die verwendet werden können : absolute Positionierung der Position; Verlassen nach dem Passieren der Maus. Überwachung und Methoden werden definitiv verwendet, aber was werden darüber hinaus noch verwendet und wie werden sie implementiert?

1. Um den Schnittstellenstatus aller Anzeigen zu erkennen

Schreiben Sie zuerst den HTML-Code

Kopieren Sie den Code Der Code lautet wie folgt:

div id="shareLeft" class="shareLeft"> 🎜>

Tips

div>

/span>


Dann CSS-Kodierung

Kopieren Sie den Code

Der Code lautet wie folgt: *{margin: 0;padding: 0;} #shareLeft{position: Fixed;background-color: yellow; top: 50px;width: 300px; height: 600px;right: 0px;} #mainMsg{color: #fff;position: absolute;cursor: pointer;text-align: center;background-color: red;top: 60px;width: 100px;height: 400px;padding: 20px 0 0 10px;margin-left: -100px;border-radius:50px 0 0 50px; }

.list{float: right;background-color: #fff ;width: 280px;height: 580px ;margin: 10px 10px 10px 10px;}

Lassen Sie uns hier die wichtigsten Punkte analysieren: a. Position: fest, diese feste Position ist sehr gut ; b. rechts: 0px, das ist spezifisch Die Anwendung wird später im Detail erklärt, aber das ist auch sehr wichtig. 3. Der Rand links von #mainMsg: -100px, dieser Ort ist auch sehr wichtig, also nehmen wir a Schauen Sie sich den Effekt an


Haha, das ist der größte in diesem Jahr. Machen wir einen Streich mit der Popup-Box. Reden wir weiter über js, um den Popup-Effekt zu erzielen

2. Den detaillierten Teil ausblenden und den Eingabeaufforderungsteil durchsickern lassen
Dies ist relativ einfach. Um es zu ändern, fügen Sie einfach den rechten Wert von shareLeft, right=-300px, hinzu, was der Breite des Div entspricht

3. Verwenden Sie js, um den Popup-Effekt zu erzielen

Dies ist nicht das erste Mal, dass wir diesen Timer-Effekt verwenden. Wir haben ihn bereits verwendet, als wir den Schreibmaschineneffekt in js implementiert haben. Hier haben wir gerade das Timing-Objekt geändert




Code kopieren

Der Code lautet wie folgt: < span style="font-size:12px;"> 🎜>

Die wichtigsten Punkte, die in diesem Code zu beachten sind, sind: offsetWidth, .style.right usw. Ich werde noch nicht näher darauf eingehen, sondern werde es in einem speziellen Artikel vorstellen. Lassen Sie es uns hier so verwenden. Kennen Sie einfach die Bedeutung.

Ich werde darüber sprechen, nachdem ich es herausgefunden habe. Jetzt ist der Effekt erreicht, Sie können es auch versuchen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn