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
Node.js erstellt ein einfaches Crawler-Case-Tutorial
Vorbereitung Zuerst müssen Sie nodejs herunterlad...
MySQL-Grundlagen-Tutorial: Detaillierte Erklärung der DML-Anweisungen
Inhaltsverzeichnis DML-Anweisungen 1. Datensätze ...
Über das Problem beim Schreiben von Plugins zum Mounten von DOM in vue3
Im Vergleich zu vue2 verfügt vue3 über ein zusätz...
Docker-Dateispeicherpfad, Befehlsvorgang zum Starten des Containers abrufen
Der Container wurde bereits erstellt. So erfahren...
Fallstudie: Ajax responseText analysiert JSON-Daten
Lösen Sie das Problem, dass der vom Server nach d...
Rückgängigmachen der Anmeldung in MySQL
Konzepteinführung: Wir wissen, dass das Redo-Log ...
Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.16 winx64.zip
In diesem Artikel wird der spezifische Code der I...
Installieren Sie OpenSSH unter Windows und melden Sie sich beim Linux-Server an, indem Sie einen SSH-Schlüssel generieren.
Der vollständige Name von SSH ist Secure SHell. D...
Beispiel für Formularaktion und „onSubmit“
Erstens: Aktion ist ein Attribut des Formulars. HT...
Erfahren Sie mehr über JavaScript-Iteratoren
Inhaltsverzeichnis Einführung Wie sieht ein Itera...
Detailliertes Tutorial zur Installation von Docker auf CentOS 8.4
Inhaltsverzeichnis Vorwort: Systemanforderungen: ...
Verwenden Sie Skripte, um Docker-Images mit einem Klick zu verpacken und hochzuladen
Der Autor arbeitet seit über einem Jahr an einem ...
jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird
Schauen wir uns zunächst meinen Fehlercode an. ht...
Grafisches Tutorial zur Deinstallation und Installation von MySQL unter Linux
Dies ist mein erster Blog. Ich bin seit zwei Jahr...
Die Tücken der automatischen Inkrementierung numerischer MySQL-Typen
Beim Entwurf von Tabellenstrukturen gehören numer...