Ce que cet article vous apporte est une introduction à deux méthodes (exemples de code) d'implémentation de Taobao Magnifying Glass en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Qu'est-ce que la loupe Taobao
Ceci, lorsque votre souris se déplace sur l'image principale à gauche, une apparaîtra à droite L'image agrandie, appelons cela une loupe.
La première façon est d'avoir une petite image à gauche et une image originale à droite. Lorsque la souris passe sur la petite image, changez. la valeur gauche et supérieure pour obtenir un mouvement synchrone (l'attribut de position de l'image originale est défini sur absolu)
Deuxièmement, lorsque la souris se déplace sur la petite image, en changeant l'arrière-plan- position de la valeur de l’image originale pour se déplacer de manière synchrone.
La première étape consiste à obtenir la position de la souris sur la petite image et à positionner la case qui suit la souris (vous je devrais savoir De quel bloc s'agit-il ?
1 2 3 4 5 6 |
|
Cela n'est évidemment pas suffisant !
Vous devez également prendre en compte les positions/situations extrêmes
Si vous utilisez uniquement les paramètres ci-dessus, lorsque votre souris se déplace vers le bord de l'image, la moitié du carré apparaîtra à l'extérieur l'image.
La bonne réponse devrait être Lorsque votre bloc touche le bord, votre bloc ne peut plus bouger, Bien que votre souris soit toujours Déplacez-vous en dehors de la zone « effective » zone d'activité de la souris" dans l'image ci-dessous.
Ensuite, vous devez ajouter du code
1 2 3 4 5 6 |
|
La deuxième étape consiste à contrôler la gauche - en haut ou en arrière-plan - position dans la grande image
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Nous avons mentionné ci-dessus que l'événement mousemove est lié à la petite image img pour positionner le block. En fait, en fonctionnement réel, nous ne pouvons pas le lier directement avec img, mais devons utiliser un calque de masque de la même taille que img, sinon, lorsque vous déplacez la souris, l'image clignote follement , follement ! fou!
Il existe également une fonction de limitation. Si vous souhaitez limiter cela, limitez-le simplement.
Il y a une autre chose très importante, qui est la taille du p à droite de montrant la grande image , ce doit être la taille de la case sur la petite image* Zoom Si la taille du grossissement est trop grande, il y aura plus d'espace vide. Si elle est trop petite, l'affichage sera incomplet. Vous trouverez le code ci-dessous à emporter chez vous et à tester comme un fou.
Je sais que je ne suis peut-être pas très détaillé, donc. .
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
|
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!