Heim Web-Frontend js-Tutorial 基于jquery实现一张图片点击鼠标放大再点缩小_jquery

基于jquery实现一张图片点击鼠标放大再点缩小_jquery

May 16, 2016 pm 05:21 PM
图片放大 鼠标点击

复制代码 代码如下:







<script> <BR>var isopen = false; <BR>var newImg; <BR>var w = 200; //将图片宽度+200 <BR>var h = 200; // 将图片高度 +200 <BR>$(document).ready(function(){ <BR>$("img").bind("click", function(){ <BR>newImg = this; <BR>if (!isopen) <BR>{ <BR>isopen = true; <BR>$(this).width($(this).width() + w); <BR>$(this).height($(this).height() + h); <BR>moveImg(10, 10); <BR>} <BR>else <BR>{ <BR>isopen = false; <BR>$(this).width($(this).width() - w); <BR>$(this).height($(this).height() - h); <BR>moveImg(-10, -10); <BR>} <br><br>}); <BR>}); <BR>//移位 <BR>i = 0; <BR>function moveImg(left,top) <BR>{ <BR>var offset = $(newImg).offset(); <BR>$(newImg).offset({ top: offset.top + top, left: offset.left + left}); <BR>if (i == 10) <BR>{ <BR>i =0; <BR>return; <BR>} <BR>setTimeout("moveImg("+left+","+top+")", 10); <BR>i++; <BR>} <BR></script>









Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

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

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So erstellen Sie eine Unterstreichungsanimation, wenn Sie in PPT mit der Maus auf Text klicken So erstellen Sie eine Unterstreichungsanimation, wenn Sie in PPT mit der Maus auf Text klicken Mar 26, 2024 pm 06:40 PM

1. Geben Sie Text ein. 2. Wählen Sie die Form unter „Einfügen“ aus und wählen Sie „Linie darin“ aus. 3. Zeichnen Sie eine gerade Linie unter dem Wort Liebe. 4. Wählen Sie die gerade Linie aus, wählen Sie dann das Animationsmenü und wählen Sie daraus einen Animationseffekt aus. 5. Spielen Sie die Animation ab. Zu diesem Zeitpunkt befinden sich keine horizontalen Linien unter dem Text. 6. Klicken Sie mit der Maus. Unter dem Text erscheint eine horizontale Linie.

Schritte zum Implementieren des Wasserwelleneffekts per Mausklick mit reinem CSS Schritte zum Implementieren des Wasserwelleneffekts per Mausklick mit reinem CSS Oct 16, 2023 am 08:57 AM

Die Schritte zum Implementieren des Mausklick-Wasserwelleneffekts mit reinem CSS erfordern spezifische Codebeispiele. Der Mausklick-Wasserwelleneffekt ist einer der häufigsten interaktiven Effekte in der Webentwicklung und kann den Benutzern ein lebendigeres Erlebnis bieten. In diesem Artikel zeigen wir Ihnen, wie Sie diesen Effekt mit reinem CSS erzielen, und stellen konkrete Codebeispiele bereit. Die Umsetzungsschritte sind wie folgt: Schritt 1: HTML-Struktur Erstellen Sie zunächst ein Element mit Mausklickeffekt in der HTML-Datei. Sie können ein &lt;div&gt;-Element als Container verwenden und ein festlegen

Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern? Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern? Oct 20, 2023 am 09:16 AM

Wie implementiert man mit JavaScript einen Mouseover-Vergrößerungseffekt auf Bildern? Das heutige Webdesign legt immer mehr Wert auf die Benutzererfahrung und viele Webseiten fügen Bildern einige Spezialeffekte hinzu. Unter diesen ist der Bild-Mouse-Over-Vergrößerungseffekt ein häufiger Spezialeffekt, der das Bild automatisch vergrößern kann, wenn der Benutzer mit der Maus darüber fährt, wodurch die Interaktion zwischen dem Benutzer und dem Bild erhöht wird. In diesem Artikel wird erläutert, wie Sie mit JavaScript diesen Effekt erzielen, und es werden konkrete Codebeispiele aufgeführt. Ideenanalyse: Um den Mouseover-Vergrößerungseffekt von Bildern zu erzielen, können wir JavaS verwenden

Wie verwende ich Vue, um Bildlauf- und Zoomanimationen zu implementieren? Wie verwende ich Vue, um Bildlauf- und Zoomanimationen zu implementieren? Aug 18, 2023 am 08:13 AM

Wie verwende ich Vue, um Bildlauf- und Zoomanimationen zu implementieren? Vue.js ist ein beliebtes JavaScript-Framework, das zahlreiche Funktionen und Komponenten bietet, die es Entwicklern ermöglichen, auf einfache Weise interaktive und dynamische Webanwendungen zu erstellen. Eines der häufigsten Anwendungsszenarien ist die Implementierung von Bildlauf- und Zoomanimationen. In diesem Artikel erfahren Sie, wie Sie mit Vue.js solche Funktionen implementieren und stellen entsprechende Codebeispiele bereit. Zuerst müssen wir eine Datenliste mit mehreren Bildern vorbereiten. Wir können die UR des Bildes ändern

So erzielen Sie mit Layui einen Diashow-Effekt durch Vergrößern und Verkleinern von Bildern So erzielen Sie mit Layui einen Diashow-Effekt durch Vergrößern und Verkleinern von Bildern Oct 27, 2023 am 10:51 AM

So erzielen Sie mit Layui den Slideshow-Effekt zum Vergrößern und Verkleinern von Bildern. Der Slideshow-Effekt ist eine der gängigen Bilddarstellungsmethoden auf Websites. Er erregt die Aufmerksamkeit des Benutzers durch das Vergrößern und Verkleinern von Bildern. In diesem Artikel stellen wir vor, wie Sie mit dem Layui-Framework den Zoom-In-Diashow-Effekt von Bildern erzielen, und stellen spezifische Codebeispiele bereit. Layui ist ein einfaches, benutzerfreundliches Front-End-UI-Framework, das umfangreiche Komponenten und leistungsstarke Funktionen bietet. Mit der Karussell-Komponente können Slide-Effekte erzielt werden. Zuerst müssen wir vorstellen

Wie Vue das Flimmerproblem von durch Gesten vergrößerten Bildern auf mobilen Endgeräten löst Wie Vue das Flimmerproblem von durch Gesten vergrößerten Bildern auf mobilen Endgeräten löst Jun 30, 2023 pm 11:21 PM

So lösen Sie das Flackerproblem von Bildern mit Gestenvergrößerung bei der Vue-Entwicklung. Bei der Vue-Entwicklung kann es jedoch zu Flackerproblemen kommen, wenn Bilder durch Gesten vergrößert werden. In diesem Artikel wird eine Möglichkeit zur Lösung dieses Problems vorgestellt. Zuerst müssen wir verstehen, was dieses Problem verursacht. Auf dem mobilen Endgerät verwenden wir normalerweise die Eigenschaft transform:scale() von CSS, um den Effekt einer Gestenvergrößerung des Bildes zu erzielen. Dadurch kann die Qualität des Bildes erhalten bleiben.

So lösen Sie das Problem, dass die Maus bewegt werden kann, der Klick jedoch nicht funktioniert So lösen Sie das Problem, dass die Maus bewegt werden kann, der Klick jedoch nicht funktioniert Oct 11, 2023 pm 02:20 PM

Zu den Lösungen für das Problem, dass sich die Maus bewegen kann, aber Klicks ungültig sind, gehören: 1. Überprüfen Sie, ob die Maus selbst ordnungsgemäß funktioniert. 2. Stellen Sie sicher, dass der richtige Maustreiber auf dem Computer installiert ist. 3. Stellen Sie sicher, dass die Mausklickfunktion aktiviert ist in den Betriebssystemeinstellungen aktiviert und nicht festgelegt. 4. Führen Sie eine Sicherheitssoftware aus, um das System zu scannen und mögliche Viren oder Malware zu entfernen. 5. Computer-Hardwarefehler, senden Sie den Computer zur Reparatur oder wenden Sie sich an professionelle Techniker.

So erzielen Sie mit Layui Bildvergrößerungen und Flip-Effekte So erzielen Sie mit Layui Bildvergrößerungen und Flip-Effekte Oct 24, 2023 am 11:16 AM

Für die Verwendung von Layui zum Erzielen von Bildvergrößerungs- und Spiegelungseffekten sind bestimmte Codebeispiele erforderlich. Zusammenfassung: Layui ist ein auf jQuery basierendes Front-End-UI-Framework. In diesem Artikel wird erläutert, wie Sie die Module und Komponenten in Layui verwenden, um Bildvergrößerungs- und Spiegelungseffekte zu erzielen . Anhand von Beispielcode wird speziell demonstriert, wie Layui zum Implementieren dieser Funktionen verwendet wird, um den Lesern einen schnellen Einstieg zu erleichtern. Schlüsselwörter: Layui, Bildvergrößerung, Flip-Effekt Einführung: Layui ist ein leichtes, einfaches und benutzerfreundliches Front-End-UI-Framework mit umfangreichen Modulen

See all articles