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
Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe
Der zu erzielende Effekt In vielen Fällen überwac...
jQuery benutzerdefinierter Lupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
So fragen Sie Bilder in einem privaten Register ab oder erhalten sie
Docker fragt Bilder in einem privaten Register ab...
Beispiel für die MySQL-Methode zum Löschen von Daten und Datentabellen
Es ist sehr einfach, Daten und Tabellen in MySQL ...
Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert
Inhaltsverzeichnis 1. Übersicht 2. Speicherverwal...
CSS entfernt den gepunkteten Rahmen, der beim Klicken auf einen Link entsteht. Kompatibel mit Browsern, die den W3C-Standards entsprechen
Teil des Codes: Code kopieren Der Code lautet wie...
MySQL-Reihe: Datenbankdesign, drei Paradigmen, Tutorial-Beispiele
Inhaltsverzeichnis 1. Wissensbeschreibung der dre...
5 Möglichkeiten, um festzustellen, ob ein Objekt in JS ein leeres Objekt ist
1. Konvertieren Sie das JSON-Objekt in eine JSON-...
So aktivieren Sie das Root-Konto in Ubuntu 20.04
Nach der Installation von Ubuntu 20.04 gibt es st...
So verwenden Sie das VS2022-Remote-Debugging-Tool
Manchmal müssen Sie bei der Arbeit ein Remote-Deb...
Nachdem die mybatis-plus-Paging-Parameter übergeben wurden, enthält die SQL-Where-Bedingung keine Limit-Paging-Informationsoperation
Ich habe fast zwei Stunden damit verbracht, versc...
Eine kurze Diskussion über die Lösung für übermäßige Daten in ElementUI el-select
Inhaltsverzeichnis 1. Szenariobeschreibung 2. Lös...
Synchrone und asynchrone JS-Schwierigkeiten sowie Umfang und Abschluss und detaillierte Erklärung von Prototypen und Prototypenketten
Inhaltsverzeichnis JS Drei Berge Synchron Asynchr...
Detaillierte Erklärung der Verwendung des SS-Befehls in Linux in Kombination mit Zabbix zum Überwachen von Sockets
Inhaltsverzeichnis Vorwort 1. SS-Befehl 2. Gesamt...
So entwerfen und optimieren Sie MySQL-Indizes
Inhaltsverzeichnis Was ist ein Index? Prinzip der...