Il y a souvent une zone d'affichage de produit sur la page du produit du site Web d'achat. Une fonction dans cette zone d'image est la fonction d'agrandissement de l'image du produit. Déplacez la zone de mise au point sur la gauche pour agrandir les détails et afficher les détails. Les détails sont les suivants. La méthode pour implémenter cette fonction est également très simple.
Expérience: faire une image amplifiée de la mise au point du produit.
Compétences requises:
1. Méthodes de base pour obtenir des éléments de page;
2. Quelques événements simples;
3. Vous utiliserez DOM pour définir les attributs de l'élément;
Principe du cas:
1. Suivez l'événement de la souris de la boîte de mise au point;
2. Règlement sur la zone de déménagement de la boîte de mise au point;
3. Affichage du contenu des grandes boîtes;
Convient pour: JS débutants
-------------------------------------------------------------------commencer! -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. Premièrement, nous préparons le style CSS. Plusieurs points qui doivent être prêts attention dans le style CSS sont:
(1) La carte de mise au point est relative à la position, affichage par défaut: aucun;
(2) La case montrant la grande image à droite (ci-après dénommée la grande image d'image) Affichage par défaut: Aucun; Le contenu de la grande image d'image doit être caché après débordement: caché;
2. Commencez à écrire du code de script:
(1) Obtenez d'abord l'élément de page:
// Tout d'abord, la fonction d'élément getID (tag) à utiliser {// définit une méthode pour obtenir des éléments avec ID, ce qui réduit beaucoup de charge de travail! return document.getElementById (tag)} var box = getID ("box"); var small = getID ("small"); var mask = getID ("masque"); var big = getID ("big"); var pic = big.children [0]; // voici pour obtenir des éléments via la méthode du nœud(2) Assurez-vous que deux événements apparaîtront lorsque la souris se déplacera vers la petite image: 1) La boîte de mise au point doit être affichée; 2) La grande boîte d'image doit être affichée. De même, une fois la souris retirée, ces deux feuilles doivent être annulées.
// Deux effets apparaissent lors du déplacement de la souris vers l'image small.onMouseOver = function () {mask.style.display = "block"; big.style.display = "bloc"; } small.onmouseout = function () {mask.style.display = "Aucun"; big.style.display = "aucun"}(3) Définissez la boîte de mise au point suivante:
1) Lorsque la zone de mise au point est définie, notre temps de suivi est un fait, donc le type d'événement ici n'est pas OnMouseOver; Mais Onmousemove;
2) Le problème impliqué dans ce code est principalement un problème de calcul de positionnement de masque (boîte de mise au point). Le problème qui est facile à ignorer est de quelle position le masque se déplace? Dans mon style CSS, le masque est placé dans la petite boîte, de sorte que la position mobile relative doit être la position de l'élément parent petit qui a été positionné. Ainsi, les coordonnées de position que j'obtiens avec ClientX et Clienty par rapport à la fenêtre actuelle du navigateur ne peuvent pas être utilisées directement, et l'influence de la valeur de marge de sa boîte parent doit être soustraite.
// Définissez la boîte de mise au point de la petite image et suivez la souris; small.onMouseMove = function (e) {var marginl = box.offsetLeft; // Utilisez la méthode Offsetleft pour obtenir la marge-gauche de la boîte var margint = box.offsetTop; // Utilisez la méthode OffsetTop pour obtenir la marge-top de la boîte var currentx = e.clientx; var currenty = e.clienty; // Utilisez e.clinety et e.clinety par rapport au coin supérieur gauche du navigateur var x = currentx-marginl-mask.offsetwidth / 2; var y = currenty-margint-mask.offsetheight / 2; // Pour aligner le centre de la zone de mise au point avec la souris, vous devez soustraire la moitié de la largeur et de la hauteur de la mise au point boîte/---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------(4) Mouvement de la position de la boîte de mise au point inactive
1) Une fois l'étape précédente terminée, le mouvement de la boîte de mise au point n'est pas inactif. Pendant le processus de navigation sur le site d'achat, nous pouvons clairement sentir que la boîte de mise au point ne permet pas de déplacer en dehors de la petite image, provoquant une mauvaise expérience utilisateur;
2) Pour limiter le mouvement de la zone de mise au point, principalement lorsque le changement x et y dépasse la valeur autorisée, donnez-lui une valeur fixe;
// Définissez la boîte de mise au point de la petite image et suivez la souris; small.onMouseMove = function (e) {var marginl = box.offsetLeft; var margint = box.offsetTop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetwidth / 2; var y = currenty-margint-mask.offsetheight / 2; // Définissez la zone mobile pour la zone de mise au point if (x <0) {x = 0;} if (x> small.offsetwidth-mask.offsetwidth) {x = small.offsetwidth-mask.offsetwidth}; // La valeur minimale de x utilisée pour le positionnement est de 0, et la valeur maximale est la longueur de l'axe y de la longueur de petite longueur. Il en va de même pour l'axe y if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetheight) {y = small.offsetheight-mask.offsetheight}; mask.style.left = x + "px"; // Notez que la zone de déménagement est écrite après la spécification de la zone de mouvement et faites attention à l'ordre d'exécution du code masque.style.top = y + "px";(5) Définir l'affichage de grandes images
1) Pour réaliser le mouvement de l'image dans la grande boîte, vous devriez penser à la valeur-margin;
2) La quantité de distance que vous pouvez déplacer peut être utilisée pour multiplier les valeurs gauche et supérieure du masque par une proportion fixe. Pensez à la position affichée dans le coin supérieur gauche de la zone de mise au point et le coin supérieur gauche du grand cadre d'image est le même! ! ! Ce n'est pas très difficile à comprendre.
// Définissez le contenu affiché dans la grande boîte var relativex = mask.offsetLeft; var relativey = mask.offsetTop; var proporationx = pic.offsetwidth / small.offsetwidth; // définit le rapport var proporationy = pic.offsetheight / small.offsetwidth; pic.style.marginleft = -relativex * ProPorationx + "px"; //Note! La valeur de la marge doit être négative, "px ne jette pas pic.style.margintop = -relative * proporationy +" px ";
À ce stade, notre démo est terminée! N'est-ce pas très simple
Je vais coller l'intégralité du code ci-dessous, dans l'espoir de discuter et de communiquer avec vous.
Voici le code CSS
<style> * {margin: 0; rembourrage: 0; } #box {margin: 50px; } #small {width: 229px; hauteur: 250px; Border: 1px noir solide; Texte-aligne: Centre; Position: relative; flottant: à gauche; } #mask {width: 100px; hauteur: 100px; Color en arrière-plan: RGBA (214, 111, 193, 0,3); Position: absolue; en haut: 0; à gauche: 0; / * Affichage: aucun; * /} #big {width: 350px; hauteur: 350px; Border: 1px noir solide; flottant: à gauche; débordement: caché; / * Affichage: aucun; * /} </ style>Voici HTML
<body> <div id = "box"> <div id = "small"> <img src = "small_img.jpg" /> <div id = "mask"> </ div> </ div> <div id = "big"> <img src = "big_img.jpg" /> </v> </ div>
Voici le code JS
<Script> // Tout d'abord, l'élément à utiliser Fonction GetId (tag) {return document.getElementById (tag)} var box = getID ("box"); var small = getID ("small"); var mask = getID ("masque"); var big = getID ("big"); var pic = big.children [0]; console.log (pic); // La souris se déplace vers l'image et deux effets apparaissent small.onMouseOver = function () {mask.style.display = "block"; big.style.display = "bloc"; } small.onmouseout = function () {mask.style.display = "Aucun"; big.style.display = "None"} // Définissez la boîte de mise au point de la petite image et suivez la souris; small.onMouseMove = function (e) {var marginl = box.offsetLeft; var margint = box.offsetTop; var currentx = e.clientx; var currenty = e.clienty; var x = currentx-marginl-mask.offsetwidth / 2; var y = currenty-margint-mask.offsetheight / 2; // Définissez la zone mobile pour la zone de mise au point if (x <0) {x = 0;} if (x> small.offsetwidth-mask.offsetwidth) {x = small.offsetwidth-mask.offsetwidth}; if (y <0) {y = 0;} if (y> small.offsetheight-mask.offsetheight) {y = small.offsetheight-mask.offsetheight}; mask.style.left = x + "px"; mask.style.top = y + "px"; // Définissez le contenu affiché dans la grande boîte var relativex = mask.offsetLeft; var relativey = mask.offsetTop; var relativey = mask.offsetTop; var proporationx = pic.offsetwidth / small.offsetwidth; var proporationy = pic.offsetheight / small.offsetwidth; pic.style.marginleft = -relativex * ProPorationx + "px"; pic.style.Margintop = -relativey * Proporationy + "px"; } </ script>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.