Nous avons besoin de 4 étapes pour réaliser l'effet de la loupe Taobao dans l'image animée.
1. Complétez la disposition de la petite zone d'image, du masque et de la grande zone d'image
2. Appliquez le mouvement de la souris sur la petite zone d'image pour afficher le masque et la grande zone d'image #🎜. 🎜#3. Mettez en œuvre la souris Déplacez le masque dans la petite zone d'image
4. La plage de mouvement du masque ne peut pas dépasser la petite zone d'image, et lors du déplacement, la grande image se déplacera
#🎜 🎜# Complétez la petite boîte à images, le masque, la mise en page de la grande boîte à images
Implémentez le mouvement de la souris sur la petite zone d'image pour afficher le masque et la grande zone d'image
Implémentez le masque de mouvement de la souris pour vous déplacer dans la petite zone d'image
Jugement de la valeur limite, si elle est inférieure ou égale à 0, alors la gauche du masque est égale à 0 et le x a une limite. La valeur est en fait la largeur de la petite boîte moins la largeur du masque. De la même manière, l’axe y correspond à la hauteur de la petite boîte moins la hauteur du masque.
Il existe une relation proportionnelle dans la conduite du mouvement des grandes images. Distance de déplacement de la grande image = distance de déplacement du masque * distance de déplacement maximale de la grande boîte / x distance de déplacement maximale du masque,
Code complet
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 |
|
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!