jQuery realisiert den Bildverfolgungseffekt
|
In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des Bildverfolgungseffekts zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Ergebnisse erzielen
Zu implementierende Funktionen: * Wenn die Maus hereinkommt, wird ein großes Bild angezeigt; Code
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<title>Titel hier einfügen</title>
<style type="text/css">
Körper {
Textausrichtung: zentriert;
}
#klein {
Rand oben: 150px;
}
#großzeigen {
Position: absolut;
Anzeige: keine;
}
</Stil>
<script Typ="text/javascript" src="script/jquery-1.7.2.js"></script>
<Skripttyp="text/javascript">
/*
* Zu implementierende Funktionen:
* Wenn die Maus hereinkommt, wird ein großes Bild angezeigt;
* Bewegen Sie die Maus nach außen, um das große Bild auszublenden.
* Bewegen Sie die Maus im großen Bild, und das große Bild bewegt sich mit.
*/
$(Funktion(){
/*
* Wenn die Maus hinein- oder hinausgeht, großes Bild ein- oder ausblenden*
*/
//Ereignisse an kleine Bilder binden$("#small").bind("mouseover mouseout mousemove",function (event) {
/*
* Wird die Maus herausbewegt, verschwindet das große Bild;
* Bewegen Sie die Maus darüber, um das große Bild anzuzeigen.
*/
wenn(event.type == "mouseover"){
$("#showBig").show();
} sonst wenn (event.type == "mouseout"){
$("#showBig").hide();
} sonst wenn(event.type == "mousemove"){
console.log(Ereignis);
$("#showBig").offset({
links: event.pageX + 10,
oben: event.pageY + 10
/*
* Ursprünglich befindet sich die Maus in der oberen linken Ecke des großen Bildes, es tritt jedoch ein Problem auf: Wenn sich die Maus von der oberen linken Ecke des kleinen Bildes in die untere rechte Ecke bewegt, verlässt die Maus zuerst den Bereich des großen Bildes und wird als Mouseout beurteilt. Daher sollte das große Bild ausgeblendet werden.
* Später stellte sich heraus, dass es sich bei dem Bereich darunter tatsächlich um den kleinen Bildbereich handelte, der als Überblendung beurteilt wurde, und das große Bild wurde erneut angezeigt.
* ----> Führt zu einem zu schnellen Seitenwechsel* ==> Lösung: Platzieren Sie die Maus außerhalb des großen Bildes, in einem bestimmten Abstand von der oberen linken Ecke des großen Bildes.
* Wenn die Maus von der oberen linken Ecke des kleinen Bildes zur unteren rechten Ecke bewegt wird, wird die obige Situation vermieden. * Denn solange sich die Maus noch im Bereich des kleinen Bildes befindet, blockiert das große Bild nicht das kleine Bild, das die Maus im nächsten Moment erreichen wird. */
});
}
});
});
</Skript>
</Kopf>
<Text>
<img id="klein" src="img/klein.jpg" />
<div id="Groß anzeigen">
<img src="img/groß.jpg">
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grafisches Tutorial zur Installation von Tomcat8 auf einem Linux-System Centos7.X
>>: Detailliertes Beispiel für die Verwendung der if-Anweisung in einer gespeicherten MySQL-Prozedur
Artikel empfehlen
Ideen und Codes zur Realisierung des Lupeneffekts in js
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung
Vorwort Wenn wir Anwendungen als Docker-Container...
Detaillierte Erklärung der sieben Datentypen in JavaScript
Inhaltsverzeichnis Vorwort: Detaillierte Einführu...
Die vollständige Liste der MIME-Typen
Was ist ein MIME-TYP? 1. Zunächst müssen wir vers...
Einführung in JavaScript-Array-Deduplizierungs- und -Flatteningfunktionen
Inhaltsverzeichnis 1. Array-Abflachung (auch als ...
So implementieren Sie die Kontrollkästchen- und Radioausrichtung
Nicht nur das Verhalten verschiedener Browser ist...
Tutorial zu HTML-Tabellen-Tags (3): Breiten- und Höhenattribute WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Tabelle ...
Lösung für BT Baota Panel php7.3 und php7.4 unterstützen ZipArchive nicht
Die Lösung für das Problem, dass die PHP7.3-Versi...
Detaillierte Erklärung des Übergangsattributs einer einfachen CSS-Animation
1. Verständnis der Übergangsattribute 1. Das Über...
Detailliertes Tutorial zur Installation der MySQL-Datenbank auf Alibaba Cloud Server
Inhaltsverzeichnis Vorwort 1. Deinstallieren Sie ...
So ändern Sie die Länge eines Eingabetextfelds entsprechend seinem Inhalt
Erste: Code kopieren Der Code lautet wie folgt: &l...
Grafische Erklärung des MySQL-Abfragecaches
Inhaltsverzeichnis 1. Prinzipübersicht Query Cach...
So bereinigen Sie den MySQL-Speicherplatz in der Alibaba Cloud
Heute habe ich von Alibaba Cloud eine Festplatten...
Docker startet im Status „Beendet“
Nach dem Docker-Lauf ist der Status immer „Beende...
Beispiel-Tutorial für MySQL-Datenbanktransaktionen
Inhaltsverzeichnis 1. Was ist eine Transaktion? 2...