Code de l'amplificateur d'image jqzoom

Code d'amplificateur d'image jqzoom, adapté à l'affichage d'images de produits, compatible avec les navigateurs grand public, téléchargement recommandé sur le site Web chinois PHP ! Instructions: 1. Introduction de la zone de tête <link rel="stylesheet" href="css/jqzoom.css" type="text/css"> 2. Présentation de la bibliothèque js <script src="js/j
Comment utiliser :
1. Introduction de la zone de tête
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
2. Présentez la bibliothèque js
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
3. Appelez la bibliothèque de fonctions jqzoom
<script type="text/javascript">
$(fonction() {
options variables =
{
zoomWidth : 250, //La largeur de la loupe
zoomHauteur : 250,//La hauteur de la loupe
zoomType : 'inverse'
};
$(".jqzoom").jqzoom(options);
});
</script>
Paramètres de configuration :
zoomType, valeur par défaut : 'standard', une autre valeur est 'reverse', s'il faut recouvrir l'image originale d'un calque semi-transparent.
zoomWidth, valeur par défaut : 200, la largeur de la fenêtre agrandie.
zoomHeight, valeur par défaut : 200, la hauteur de la fenêtre agrandie.
xOffset, valeur par défaut : 10, valeur de décalage de l'axe x de la fenêtre de grossissement par rapport à l'image originale, peut être négative.
yOffset, valeur par défaut : 0, la valeur de décalage de l'axe y de la fenêtre de grossissement par rapport à l'image d'origine, peut être négative.
position, valeur par défaut : 'right', la position de la fenêtre agrandie, la valeur peut aussi être : 'right', 'left', 'top', 'bottom'.
Objectif, valeur par défaut : vrai, si faux, l'objectif ne sera pas affiché sur l'image originale.
imageOpacity, valeur par défaut : 0,2, lorsque la valeur de zoomType est 'reverse', ce paramètre permet de préciser la transparence du masque.
titre, valeur par défaut : vrai, affiche le titre dans la fenêtre d'agrandissement, la valeur peut être la valeur du titre de la marque a, sinon, c'est la valeur du titre de l'image originale.
showEffect, valeur par défaut : 'show', affiche l'effet lorsque la fenêtre est agrandie, la valeur peut être : 'show', 'fadein'.
hideEffect, valeur par défaut : 'hide', effet lors du masquage de la fenêtre agrandie : 'hide', 'fadeout'.
fadeinSpeed, valeur par défaut : 'fast', vitesse de fondu d'entrée de la fenêtre agrandie (options : 'fast', 'slow', 'medium').
fadeoutSpeed, valeur par défaut : 'lent', vitesse de fondu de la fenêtre agrandie (options : 'rapide', 'lent', 'moyen').
showPreload, valeur par défaut : true, s'il faut afficher l'invite de chargement Zoom de chargement (options : « true », « false »).
preloadText, valeur par défaut : « Zoom de chargement », texte d'invite de chargement personnalisé.
preloadPosition, valeur par défaut : 'center', la position de l'invite de chargement, la valeur peut également être 'bycss' pour spécifier la position via CSS.
Toutes les ressources de ce site proviennent d'internautes ou sont réimprimées par les principaux sites de téléchargement. Veuillez vérifier vous-même l'intégrité du logiciel ! Toutes les ressources de ce site sont uniquement à titre de référence d'apprentissage. Merci de ne pas les utiliser à des fins commerciales. Sinon, vous serez responsable de toutes les conséquences ! En cas d'infraction, veuillez nous contacter pour la supprimer. Coordonnées : admin@php.cn
Article connexe

23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Chapitre avancé 1. différentes périodes

23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Niveau élémentaire 1. Laisse les mots continuer

23 Dec 2016
L'auteur a accumulé de nombreux effets spéciaux Web merveilleux et pratiques au fil du temps. Presque tous ces effets spéciaux sont des effets spéciaux de pages Web couramment utilisés. Je vais maintenant vous présenter ces effets spéciaux organisés et modifiés en trois niveaux. Niveau intermédiaire 1. compte à rebours des vacances

24 Nov 2024
Créer un curseur d'image jQuery simple avec des effets de glissement et d'opacitéCréer un curseur d'image personnalisé dans jQuery sans recourir à des plugins externes...

09 Feb 2017
Cet article présente les effets d'image de page Web faits à la main en CSS3 pur

09 Jan 2017
Les codes de vérification de sites Web sont une technologie très courante. Ci-dessous, je vais vous présenter comment le mettre en œuvre techniquement

06 Mar 2017
Cet article présente principalement les effets d'animation d'une souris CSS3 pure glissant sur le calque de masque d'image.

21 Dec 2016
Cet article présente principalement la méthode d'implémentation du code de vérification d'image ThinkPHP3.2.1 et analyse les problèmes rencontrés dans le processus de génération du code de vérification d'image par thinkPHP3.2.1 et les solutions correspondantes sous forme d'exemples. Il a une certaine valeur de référence et des amis dans. le besoin peut s'y référer.


Outils chauds Tags

Hot Tools

Effet carrousel de curseur d'image 3D jQuery
Effet carrousel de curseur d'image 3D basé sur jQuery

CSS pur pour obtenir des animations de commutation sympas lorsque la souris passe à travers des images
Pure CSS permet des téléchargements de code d'animation de commutation sympas lorsque la souris passe à travers des images.

Plug-in de carrousel d'images HTML5 avec effet de parallaxe
Un plug-in de carrousel d'images HTML5 avec effet de parallaxe, qui peut contrôler les images avec la souris et produire un effet de différence visuelle sympa lorsque le carrousel d'images défile.

Image d'en-tête du site B, survol interactif de la souris, profondeur de champ, effet de mise au point
Un effet spécial de page Web d'effet de mise au point de profondeur de champ interactif avec la souris pour l'image d'en-tête du site B.

Effets de mur d'images 3D jQuery sympas qui peuvent être glissés et pivotés
Un effet de mur d'images 3D jQuery sympa qui peut être glissé et pivoté. Les images sont entourées pour former un mur d'images circulaire, et chaque image a des effets de lueur et de réflexion.
