Maison interface Web js tutoriel 基于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>









Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Commandes de chat et comment les utiliser
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment créer une animation de soulignement lorsque la souris clique sur du texte en PPT Comment créer une animation de soulignement lorsque la souris clique sur du texte en PPT Mar 26, 2024 pm 06:40 PM

1. Saisissez le texte. 2. Sélectionnez la forme sous Insérer et sélectionnez Ligne à l'intérieur. 3. Tracez une ligne droite sous le mot amour. 4. Sélectionnez la ligne droite, puis sélectionnez le menu d'animation et choisissez un effet d'animation. 5. Lancez l'animation À ce stade, il n'y a aucune ligne horizontale sous le texte. 6. Cliquez sur la souris et une ligne horizontale apparaîtra sous le texte.

Étapes pour implémenter l'effet d'entraînement de l'eau lors d'un clic de souris en utilisant du CSS pur Étapes pour implémenter l'effet d'entraînement de l'eau lors d'un clic de souris en utilisant du CSS pur Oct 16, 2023 am 08:57 AM

Les étapes pour implémenter l'effet d'ondulation de l'eau par clic de souris à l'aide de CSS pur nécessitent des exemples de code spécifiques. L'effet d'ondulation de l'eau par clic de souris est l'un des effets interactifs courants dans le développement Web et il peut apporter une expérience plus vivante aux utilisateurs. Dans cet article, nous expliquerons comment obtenir cet effet en utilisant du CSS pur et fournirons des exemples de code spécifiques. Les étapes d'implémentation sont les suivantes : Étape 1 : Structure HTML Tout d'abord, créez un élément avec un effet de clic de souris dans le fichier HTML. Vous pouvez utiliser un élément &lt;div&gt; comme conteneur et définir un

Comment implémenter l'effet de grossissement du survol de la souris sur les images avec JavaScript ? Comment implémenter l'effet de grossissement du survol de la souris sur les images avec JavaScript ? Oct 20, 2023 am 09:16 AM

Comment implémenter l'effet de grossissement du survol de la souris sur les images avec JavaScript ? La conception Web actuelle accorde de plus en plus d'attention à l'expérience utilisateur, et de nombreuses pages Web ajoutent des effets spéciaux aux images. Parmi eux, l'effet d'agrandissement de l'image au survol de la souris est un effet spécial courant, qui peut agrandir automatiquement l'image lorsque l'utilisateur passe la souris, augmentant ainsi l'interaction entre l'utilisateur et l'image. Cet article expliquera comment utiliser JavaScript pour obtenir cet effet et donnera des exemples de code spécifiques. Analyse d'idées : pour obtenir l'effet d'agrandissement des images au survol de la souris, nous pouvons utiliser JavaS

Comment utiliser Vue pour implémenter le défilement d'images et l'animation de zoom ? Comment utiliser Vue pour implémenter le défilement d'images et l'animation de zoom ? Aug 18, 2023 am 08:13 AM

Comment utiliser Vue pour implémenter le défilement d'images et l'animation de zoom ? Vue.js est un framework JavaScript populaire qui fournit un riche ensemble de fonctionnalités et de composants permettant aux développeurs de créer facilement des applications Web interactives et dynamiques. L’un des scénarios d’application courants consiste à implémenter des animations de défilement et de zoom d’images. Dans cet article, nous apprendrons comment utiliser Vue.js pour implémenter une telle fonctionnalité et fournirons des exemples de code correspondants. Tout d’abord, nous devons préparer une liste de données contenant plusieurs images. On peut changer l'UR de l'image

Comment utiliser Layui pour obtenir un effet de diaporama en zoomant et dézoomant sur les images Comment utiliser Layui pour obtenir un effet de diaporama en zoomant et dézoomant sur les images Oct 27, 2023 am 10:51 AM

Comment utiliser Layui pour obtenir l'effet diaporama consistant à agrandir et réduire les images. L'effet diaporama est l'une des méthodes d'affichage d'images courantes sur les sites Web. Il attire l'attention de l'utilisateur grâce à l'agrandissement et à la réduction des images. Dans cet article, nous présenterons comment utiliser le framework Layui pour obtenir l'effet de diaporama zoomé sur les images et fournirons des exemples de code spécifiques. Layui est un framework d'interface utilisateur frontal simple et facile à utiliser qui fournit des composants riches et des fonctions puissantes. Le composant Carrousel peut être utilisé pour obtenir des effets de diapositive. Tout d’abord, nous devons introduire

Comment Vue résout le problème de scintillement des images agrandies par gestes sur les terminaux mobiles Comment Vue résout le problème de scintillement des images agrandies par gestes sur les terminaux mobiles Jun 30, 2023 pm 11:21 PM

Comment résoudre le problème de scintillement des images d'agrandissement des gestes mobiles dans le développement Vue. Le zoom des images par gestes mobiles est une méthode d'interaction utilisateur courante. Cependant, dans le développement de Vue, en raison de l'influence du mécanisme de rendu, des problèmes de scintillement peuvent survenir lorsque les gestes agrandissent les images. Cet article présentera un moyen de résoudre ce problème. Tout d’abord, nous devons comprendre la cause de ce problème. Sur le terminal mobile, nous utilisons généralement la propriété transform:scale() de CSS pour obtenir l'effet d'agrandissement gestuel des images, ce qui permet de maintenir la qualité de l'image.

Comment résoudre le problème selon lequel la souris peut bouger mais le clic ne fonctionne pas Comment résoudre le problème selon lequel la souris peut bouger mais le clic ne fonctionne pas Oct 11, 2023 pm 02:20 PM

Les solutions au problème selon lequel la souris peut bouger mais les clics ne sont pas valides incluent : 1. Vérifiez si la souris elle-même fonctionne correctement ; 2. Assurez-vous que le bon pilote de souris est installé sur l'ordinateur ; 3. Assurez-vous que la fonction de clic de la souris est activée ; activé dans les paramètres du système d'exploitation et n'est pas défini. Toute configuration anormale ; 4. Exécutez un logiciel de sécurité pour analyser le système et nettoyer tout virus ou logiciel malveillant possible ; 5. Défaillance matérielle de l'ordinateur, envoyez l'ordinateur en réparation ou consultez des techniciens professionnels pour obtenir de l'aide.

Comment utiliser Layui pour obtenir des effets d'agrandissement et de retournement d'image Comment utiliser Layui pour obtenir des effets d'agrandissement et de retournement d'image Oct 24, 2023 am 11:16 AM

Comment utiliser Layui pour obtenir des effets d'agrandissement et de retournement d'image nécessite des exemples de code spécifiques Résumé : Layui est un framework d'interface utilisateur frontal basé sur jQuery. Cet article explique comment utiliser les modules et les composants de Layui pour obtenir des effets d'agrandissement et de retournement d'image. . Grâce à un exemple de code, il montre spécifiquement comment utiliser Layui pour implémenter ces fonctions afin d'aider les lecteurs à démarrer rapidement. Mots clés : Layui, agrandissement d'image, effet de retournement Introduction : Layui est un framework d'interface utilisateur frontal léger, simple et facile à utiliser avec des modules riches

See all articles