


Detaillierte Erl?uterung der JS-Implementierung des Bildlupen-Plug-In-Beispiels
Jan 19, 2018 pm 02:18 PMDieser Artikel stellt haupts?chlich die Verwendung von JS zur Implementierung des Bildlupen-Plug-Ins vor. Ich hoffe, dass er jedem helfen kann.
Vorwort
Wir alle besuchen oft verschiedene E-Commerce-Websites und müssen eine Lupe verwenden, um die Details der Produkte detailliert darzustellen . Das muss jeder machen, heute machen wir ein Vergr??erungsglas-Plug-in, um zu sehen, wie das Bild vergr??ert wird ...
Schauen wir uns zun?chst den endgültigen Effekt an wird wie folgt aussehen:
Haben Sie irgendwelche Ideen, nachdem Sie den Effekt gesehen haben? Wenn nicht, schauen wir uns an, wie wir ihn erreichen k?nnen~
1 Implementierungsideen
① Um den Effekt des Vergr??erns nach dem Zeigen nach oben zu erzielen, müssen Sie drei PS erstellen, eines wird zum Platzieren des Originalbilds und das andere zum Platzieren verwendet das p für den Vergr??erungseffekt, und das letzte ist der Teil von p, der nach dem Zeigen mit der Maus nach oben vergr??ert werden muss (wir verwenden das Tag p, um dieses p zu ersetzen).
② Bestimmen Sie das Vergr??erungsverh?ltnis. Der wichtigste Punkt ist, dass das p am Mausfinger und das p des Vergr??erungseffekts dem Verh?ltnis des Originalbilds und des vergr??erten Bilds entsprechen.
③ Zeigen Sie den Vergr??erungseffekt an, nachdem Sie mit der Maus darüber gezeigt haben.
2 Spezifische Implementierungsschritte
Zuerst erstellen wir drei p.
<p id="wrapper"> <!--小圖--> <p id="img_min"> <!--圖片--> <img src="img/11.png" alt="min"> <!--跟隨鼠標(biāo)的白塊--> <p id="mousebg"></p> </p> <!--大圖--> <p id="img_max"> <img id="img2_img" src="img/11.png" alt="max"> </p> </p>
Unser HTML-Codeteil wurde fertiggestellt. Als n?chstes verwenden wir JS, um die Funktion zu implementieren:
Fügen Sie drei Ereignisse zum Originalbild hinzu. Sie sind: Mauseingabe, Mausbewegung, Mausbewegung heraus.
Wenn die Maus in das Originalbild bewegt wird, werden das p, wenn die Maus nach oben zeigt, und das p des Vergr??erungseffekts gleichzeitig angezeigt.
img1.onmouseover = function () { //鼠標(biāo)進(jìn)入 img2.style.display = 'block'; mousebg.style.display = 'block'; }
Mouse-out-Ereignis:
img1.onmouseout = function () { //鼠標(biāo)離開 img2.style.display = 'none'; mousebg.style.display = 'none'; }
Der Punkt ist, dass, wenn sich die Maus bewegt, entsprechend an die p-Tag-Position mit dem Originalbild, um den Teil des gr??eren Bildes anzuzeigen, der vergr??ert werden muss.
var _event = event||window.event;//兼容性處理 var mouseX = _event.clientX - img1.offsetLeft; //計(jì)算鼠標(biāo)相對(duì)與小圖的位置 var mouseY = _event.clientY - img1.offsetTop;
Bei der Positionsanalyse müssen Sie vier kritische Situationen berücksichtigen:
Das hei?t, wenn sich die Maus von oben, unten bewegt, links oder rechts vom Bild Wenn Sie zum ersten Mal eingeben und der Abstand weniger als die H?lfte der Breite des p auf dem Mausfinger betr?gt, wird das vergr??erte p angezeigt und bewegt sich nicht.
//特殊情況處理,分別靠近四條邊的時(shí)候 if(mouseX<mousebg.offsetWidth/2){ mouseX = mousebg.offsetWidth/2; } if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){ mouseX = img1.offsetWidth-mousebg.offsetWidth/2; } if(mouseY<mousebg.offsetHeight/2){ mouseY = mousebg.offsetHeight/2; } if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){ mouseY = img1.offsetHeight-mousebg.offsetHeight/2; }
Berechnen Sie abschlie?end den Anzeigebereich des gro?en Bildes:
//計(jì)算大圖的顯示范圍 img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px"; img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px"; //使鼠標(biāo)在白塊的中間 mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px"; mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";
Auf diese Weise , wir verwenden JS Das Plug-In zur Implementierung der Bildlupe ist vollst?ndig.
Verwandte Empfehlungen:
5 in JQuery implementierte Bildlupeneffekte, ein Muss für Websites von Einkaufszentren!
Wunderbare Javascript-Bildlupen-_Bild-Spezialeffekte
Das obige ist der detaillierte Inhalt vonDetaillierte Erl?uterung der JS-Implementierung des Bildlupen-Plug-In-Beispiels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Hei?e KI -Werkzeuge

Undress AI Tool
Ausziehbilder kostenlos

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!

Hei?er Artikel

Hei?e Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Durch die kontinuierliche Entwicklung der sozialen Medien ist Xiaohongshu zu einer Plattform für immer mehr junge Menschen geworden, auf der sie ihr Leben teilen und sch?ne Dinge entdecken k?nnen. Viele Benutzer haben beim Posten von Bildern Probleme mit der automatischen Speicherung. Wie kann man dieses Problem l?sen? 1. Wie kann das Problem des automatischen Speicherns von Bildern beim Ver?ffentlichen auf Xiaohongshu gel?st werden? 1. Cache leeren Zuerst k?nnen wir versuchen, die Cache-Daten von Xiaohongshu zu l?schen. Die Schritte sind wie folgt: (1) ?ffnen Sie Xiaohongshu und klicken Sie auf die Schaltfl?che ?Mein“ in der unteren rechten Ecke. (2) Suchen Sie auf der pers?nlichen Center-Seite nach ?Einstellungen“ und klicken Sie darauf. (3) Scrollen Sie nach unten und suchen Sie nach ?; Option ?Cache l?schen“. Klicken Sie auf ?OK“. Nachdem Sie den Cache geleert haben, geben Sie Xiaohongshu erneut ein und versuchen Sie, Bilder zu posten, um zu sehen, ob das Problem mit dem automatischen Speichern behoben ist. 2. Aktualisieren Sie die Xiaohongshu-Version, um sicherzustellen, dass Ihr Xiaohongshu

Mit der Beliebtheit von Douyin-Kurzvideos sind die Benutzerinteraktionen im Kommentarbereich bunter geworden. Einige Benutzer m?chten Bilder in Kommentaren teilen, um ihre Meinung oder Gefühle besser auszudrücken. Wie postet man also Bilder in TikTok-Kommentaren? Dieser Artikel beantwortet diese Frage ausführlich und gibt Ihnen einige entsprechende Tipps und Vorsichtsma?nahmen. 1. Wie poste ich Bilder in Douyin-Kommentaren? 1. ?ffnen Sie Douyin: Zuerst müssen Sie die Douyin-App ?ffnen und sich bei Ihrem Konto anmelden. 2. Suchen Sie den Kommentarbereich: Suchen Sie beim Durchsuchen oder Posten eines kurzen Videos die Stelle, an der Sie einen Kommentar abgeben m?chten, und klicken Sie auf die Schaltfl?che ?Kommentieren“. 3. Geben Sie Ihren Kommentarinhalt ein: Geben Sie Ihren Kommentarinhalt in den Kommentarbereich ein. 4. W?hlen Sie, ob Sie ein Bild senden m?chten: In der Benutzeroberfl?che zur Eingabe von Kommentarinhalten sehen Sie eine Schaltfl?che ?Bild“ oder eine Schaltfl?che ?+“. Klicken Sie darauf

In PowerPoint ist es eine g?ngige Technik, Bilder einzeln anzuzeigen, was durch das Festlegen von Animationseffekten erreicht werden kann. In dieser Anleitung werden die Schritte zur Implementierung dieser Technik detailliert beschrieben, einschlie?lich der grundlegenden Einrichtung, des Einfügens von Bildern, des Hinzufügens von Animationen sowie des Anpassens der Reihenfolge und des Timings der Animationen. Darüber hinaus stehen erweiterte Einstellungen und Anpassungen zur Verfügung, z. B. die Verwendung von Triggern, das Anpassen von Animationsgeschwindigkeit und -reihenfolge sowie die Vorschau von Animationseffekten. Durch Befolgen dieser Schritte und Tipps k?nnen Benutzer ganz einfach Bilder so einrichten, dass sie in PowerPoint nacheinander angezeigt werden, wodurch die visuelle Wirkung der Pr?sentation verbessert und die Aufmerksamkeit des Publikums erregt wird.

Die neuesten iPhones von Apple halten Erinnerungen mit gestochen scharfen Details, S?ttigung und Helligkeit fest. Manchmal kann es jedoch zu Problemen kommen, die dazu führen k?nnen, dass das Bild weniger klar aussieht. W?hrend der Autofokus bei iPhone-Kameras gro?e Fortschritte gemacht hat und es Ihnen erm?glicht, schnell Fotos aufzunehmen, kann die Kamera in bestimmten Situationen versehentlich auf das falsche Motiv fokussieren, wodurch das Foto in unerwünschten Bereichen unscharf wird. Wenn Ihre Fotos auf Ihrem iPhone unscharf wirken oder es ihnen insgesamt an Sch?rfe mangelt, soll Ihnen der folgende Beitrag dabei helfen, sie sch?rfer zu machen. So machen Sie Bilder auf dem iPhone klarer [6 Methoden] Sie k?nnen versuchen, Ihre Fotos mit der nativen Foto-App zu bereinigen. Wenn Sie mehr Funktionen und Optionen wünschen

Verwenden Sie auch die Foxit PDF Reader-Software? Wissen Sie, wie Foxit PDF Reader PDF-Dokumente in JPG-Bilder konvertiert? Für diejenigen, die sich für die Konvertierungsmethode interessieren jpg-Bilder, kommen Sie bitte vorbei und schauen Sie sich unten um. Starten Sie zun?chst Foxit PDF Reader, suchen Sie dann in der oberen Symbolleiste nach ?Funktionen“ und w?hlen Sie dann die Funktion ?PDF an andere“ aus. ?ffnen Sie als N?chstes eine Webseite namens ?Foxit PDF Online Conversion“. Klicken Sie auf die Schaltfl?che ?Anmelden“ oben rechts auf der Seite, um sich anzumelden, und aktivieren Sie dann die Funktion ?PDF zu Bild“. Klicken Sie dann auf die Schaltfl?che ?Hochladen“ und fügen Sie die PDF-Datei hinzu, die Sie in ein Bild konvertieren m?chten. Klicken Sie nach dem Hinzufügen auf ?Konvertierung starten“.

Einige Internetnutzer stellten fest, dass die Bilder auf der Webseite beim ?ffnen der Browser-Webseite l?ngere Zeit nicht geladen werden konnten. Was ist passiert? Ich habe überprüft, ob das Netzwerk normal ist. Was ist also das Problem? Der folgende Editor stellt Ihnen sechs L?sungen für das Problem vor, dass Webseitenbilder nicht geladen werden k?nnen. Webseitenbilder k?nnen nicht geladen werden: 1. Internetgeschwindigkeitsproblem Die Webseite kann keine Bilder anzeigen. Dies kann daran liegen, dass die Internetgeschwindigkeit des Computers relativ langsam ist und mehr Software auf dem Computer ge?ffnet ist. Und die Bilder, auf die wir zugreifen, sind relativ gro? M?glicherweise liegt eine Zeitüberschreitung beim Laden vor. Daher kann die Software, die mehr Netzwerkgeschwindigkeit verbraucht, nicht angezeigt werden. 2. Wenn auf der Webseite keine Bilder angezeigt werden k?nnen, liegt das m?glicherweise daran, dass die von uns besuchten Webseiten gleichzeitig besucht wurden.

Bei der Verwendung der WPS-Bürosoftware haben wir festgestellt, dass nicht nur ein Formular verwendet wird, sondern Tabellen und Bilder zum Text hinzugefügt werden k?nnen, auch Bilder zur Tabelle usw. hinzugefügt werden k?nnen. Diese werden alle zusammen verwendet, um den Inhalt des gesamten Dokuments zu erstellen sehen reichhaltiger aus, wenn Sie zwei Bilder in das Dokument einfügen müssen und diese nebeneinander angeordnet werden müssen. Unser n?chster Kurs kann dieses Problem l?sen: wie man zwei Bilder nebeneinander in einem WPS-Dokument platziert. 1. Zuerst müssen Sie die WPS-Software ?ffnen und das Bild finden, das Sie anpassen m?chten. Klicken Sie mit der linken Maustaste auf das Bild und eine Menüleiste wird angezeigt. W?hlen Sie ?Seitenlayout“. 2. W?hlen Sie beim Textumbruch ?Enger Umbruch“ aus. 3. Nachdem best?tigt wurde, dass bei allen ben?tigten Bildern ?Enger Textumbruch“ eingestellt ist, k?nnen Sie die Bilder an die entsprechende Position ziehen und auf das erste Bild klicken.

Einige Benutzer m?chten beim Einschalten des Computers automatisch ein Bild ?ffnen, ohne das Desktop-Hintergrundbild zu ?ndern. Wir k?nnen diese Funktion verwenden, um Bilder zu genie?en oder Notizen anzufordern. Tats?chlich ist die Einstellungsmethode sehr einfach Schauen wir es uns unten im Startordner an. So ?ffnen Sie automatisch ein Bild, wenn Windows 11 startet: 1. Zuerst müssen wir doppelklicken, um ?Dieser Computer“ auf dem Desktop zu ?ffnen. 2. Nachdem Sie diesen Computer aufgerufen haben, doppelklicken Sie, um das System ?Laufwerk C“ aufzurufen Suchen Sie dann den folgenden Speicherort: ?C:\Benutzer\Administrator“ \AppData\Roaming\Microsoft\Windows\StartMenu\Programs\Start
