Προσθέστε αυτό το εύχρηστο χαρακτηριστικό στις εικόνες σας και οι επισκέπτες σας θα εκτιμήσουν τη χρηστικότητα και την προσοχή στη λεπτομέρεια που παρείχατε.

Εάν έχετε περιηγηθεί ποτέ σε έναν ιστότοπο αγορών, πιθανότατα έχετε συναντήσει τη λειτουργία μεγεθυντικού φακού εικόνας. Σας επιτρέπει να κάνετε μεγέθυνση σε ένα συγκεκριμένο μέρος μιας εικόνας για μια πιο κοντινή προβολή. Η ενσωμάτωση αυτής της μικρής αλλά εντυπωσιακής λειτουργίας μπορεί να βελτιώσει σημαντικά την εμπειρία χρήστη στον δικό σας ιστότοπο.

Η δημιουργία ενός μεγεθυντικού φακού εικόνας με απρόσκοπτο και συνεκτικό τρόπο μπορεί να είναι μια πρόκληση. Αλλά αν ακολουθήσετε αυτά τα βήματα θα σας βοηθήσει να δημιουργήσετε το δικό σας μεγεθυντικό φακό εικόνας από την αρχή, χωρίς να χρειάζεται να βασίζεστε σε προσθήκες τρίτων.

Πότε να χρησιμοποιήσετε έναν μεγεθυντικό φακό εικόνας στο έργο Web σας

Ένας μεγεθυντικός φακός εικόνας μπορεί να σας φανεί χρήσιμος όταν δημιουργείτε ένα έργο με πολλές εικόνες. Όπως αναφέρθηκε προηγουμένως, οι μεγεθυντικοί φακοί εικόνας είναι πολύ δημοφιλείς στους ιστότοπους αγορών, επειδή μερικές φορές ο χρήστης μπορεί να χρειαστεί να ρίξει μια πιο προσεκτική ματιά στο προϊόν προτού αποφασίσει αν αξίζει να το αγοράσει.

instagram viewer

Οι πελάτες βασίζονται αποκλειστικά στις πληροφορίες και τα γραφικά που παρέχονται από τον ιστότοπο για να αξιολογήσουν την ποιότητα, τα χαρακτηριστικά και την εμφάνιση ενός προϊόντος. Ωστόσο, οι στατικές εικόνες από μόνες τους μπορεί να μην παρέχουν πάντα επαρκή σαφήνεια ή να επιτρέπουν μια ολοκληρωμένη αξιολόγηση του αντικειμένου.

Στα παραδοσιακά καταστήματα, οι πελάτες μπορούν να χειριστούν φυσικά προϊόντα, να τα εξετάσουν από κοντά και να αξιολογήσουν την καταλληλότητά τους πριν τα αγοράσουν. Οι μεγεθυντές εικόνας προσπαθούν να αναδημιουργήσουν αυτήν την εμπειρία προσφέροντας στους χρήστες παρόμοιο επίπεδο ελέγχου και εξέτασης εικονικά.

Οι μεγεθυντικοί φακοί εικόνας μπορούν επίσης να σας φανούν χρήσιμοι αν είστε δημιουργία μιας εφαρμογής συλλογής φωτογραφιών δεδομένου ότι η μεγέθυνση σε ένα συγκεκριμένο μέρος της εικόνας είναι ένα σημαντικό χαρακτηριστικό.

Κατασκευή του μεγεθυντικού φακού εικόνας

Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος στο α Αποθετήριο GitHub και είναι δωρεάν για χρήση βάσει της άδειας MIT.

Δημιουργήστε ένα φάκελο και, σε αυτόν τον φάκελο, προσθέστε ένα index.html αρχείο, στυλ.css αρχείο και main.js αρχείο. Προσθέστε αυτόν τον κώδικα boilerplate στο index.html:

html>
<htmllang="en">
<κεφάλι>
<μετασύνολο χαρακτήρων="UTF-8" />
<μεταόνομα="Θύρα προβολής"περιεχόμενο="width=device-width, αρχική κλίμακα=1.0" />
<τίτλος>Μεγεθυντικός φακός εικόναςτίτλος>
<Σύνδεσμοςσχετ="φύλλο στυλ"href="style.css" />
κεφάλι>


<σώμα>
σώμα>
html>

μεσα στην σώμα ετικέτα, δημιουργήστε ένα στοιχείο div με το όνομα κλάσης "header". Στη συνέχεια, στο div "κεφαλίδα", προσθέστε ένα h1 στοιχείο επικεφαλίδας για να εμφανίσετε τον τίτλο του μεγεθυντικού φακού της εικόνας σας.

Μπορείτε να προσαρμόσετε το κείμενο σύμφωνα με τις ανάγκες σας. Στη συνέχεια, συμπεριλάβετε δύο στοιχεία διαστήματος που παρέχουν οδηγίες για τη χρήση του μεγεθυντικού φακού και εμφανίζουν το τρέχον επίπεδο ζουμ στον χρήστη.

Μετά την ενότητα κεφαλίδας, δημιουργήστε ένα div στοιχείο με το όνομα κλάσης "container". Μέσα σε αυτό το div, προσθέστε ένα άλλο στοιχείο div με το όνομα κλάσης "magnifier" και εφαρμόστε την κλάση "κρυμμένο" για να το αποκρύψετε από την προβολή.

Αυτό το στοιχείο θα αντιπροσωπεύει την εικόνα του μεγεθυντικού φακού. Στη συνέχεια, προσθέστε μια ετικέτα σεναρίου με το χαρακτηριστικό "src" να έχει οριστεί σε "/main.js".

<σώμα>
<divτάξη="επί κεφαλής">
<h1>Μεγεθυντικός φακός εικόναςh1>
<σπιθαμή>Τύπος <ισχυρός>Βέλος επάνωισχυρός> ή <ισχυρός>Βέλος προς τα κάτωισχυρός> προς την
 αύξηση ή μείωση στο επίπεδο ζουμ.σπιθαμή>


<σπιθαμή>Επίπεδο ζουμ: <ισχυρόςτάξη="επίπεδο ζουμ">1ισχυρός>σπιθαμή>
div>


<divτάξη="δοχείο">
<divτάξη="μεγεθυντικός φακός κρυμμένος">div>
div>
<γραφήsrc="/main.js">γραφή>
σώμα>

Αντικαταστήστε τον κωδικό στο στυλ.css αρχείο με τα ακόλουθα. Μπορείτε επίσης να χρησιμοποιήσετε α CSS προεπεξεργαστής όπως το Less αν θέλεις:

:ρίζα {
--μεγεθυντικός φακός-πλάτος: 150;
--μεγεθυντικός φακός-ύψος: 150;
}
σώμα {
απεικόνιση: καλώδιο;
flex-direction: στήλη;
στοίχιση-στοιχεία: κέντρο;
}


.δοχείο {
πλάτος: 400px;
ύψος: 300px;
μέγεθος φόντου: κάλυμμα;
εικόνα φόντου: url("https://cdn.pixabay.com/φωτογραφία/2019/03/27/15/24/ζώο-4085255_1280.jpg");
φόντο-επανάληψη: χωρίς επανάληψη;
θέση: συγγενής;
δρομέας: κανένας;
}


.μεγεθυντικός φακός {
σύνορα-ακτίνα: 400px;
κουτί-σκιά: 0px 11px 8px 0px#0000008a;
θέση: απόλυτος;
πλάτος: υπολογ(var(--μεγεθυντικός φακός-πλάτος) * 1px);
ύψος: υπολογ(var(--μεγεθυντικός φακός-ύψος) * 1px);
δρομέας: κανένας;
εικόνα φόντου: url("https://cdn.pixabay.com/φωτογραφία/2019/03/27/15/24/ζώο-4085255_1280.jpg");
φόντο-επανάληψη: χωρίς επανάληψη;
}


σπιθαμή {
απεικόνιση: ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ;
}


.επί κεφαλής {
απεικόνιση: καλώδιο;
flex-direction: στήλη;
στοίχιση-στοιχεία: κέντρο;
}


.κρυμμένος {
ορατότητα: κρυμμένος;
}
div > σπιθαμή:nth-child (3) {
μέγεθος γραμματοσειράς: 20px;
}

Στο main.js αρχείο, ανακτήστε τα στοιχεία HTML με ονόματα κλάσεων, "μεγεθυντικό φακό" και "κοντέινερ" χρησιμοποιώντας το document.querySelector μέθοδο και να τις αντιστοιχίσετε στις μεταβλητές μεγεθυντικός φακός και δοχείο, αντίστοιχα.

Στη συνέχεια, χρησιμοποιώντας το getComputedStyle λειτουργία ανάκτηση του πλάτος και ύψος του στοιχείου μεγεθυντικού φακού και στη συνέχεια εξαγάγετε τις αριθμητικές τιμές από τις επιστρεφόμενες συμβολοσειρές χρησιμοποιώντας το υποσυμβολοσειρά και ευρετήριοΟφ μεθόδους.

Αντιστοιχίστε το εξαγόμενο πλάτος στη μεταβλητή μεγεθυντικός φακός Πλάτος, και το εξαγόμενο ύψος σε μεγεθυντικός φακός Ύψος.

αφήνω μεγεθυντικός φακός = έγγραφο.querySelector(".μεγεθυντικός φακός");
αφήνω δοχείο = έγγραφο.querySelector(".δοχείο");
αφήνω magnifierWidth = getComputedStyle (μεγεθυντικός φακός).width.substring(
0,
 getComputedStyle (μεγεθυντικός φακός).width.indexOf("Π")
);
αφήνω magnifierHeight = getComputedStyle (μεγεθυντικός φακός).width.substring(
0,
 getComputedStyle (μεγεθυντικός φακός).height.indexOf("Π")
);

Στη συνέχεια, ορίστε τις μεταβλητές για το επίπεδο ζουμ, το μέγιστο επίπεδο ζουμ και τις θέσεις του δρομέα και της εικόνας του μεγεθυντικού φακού.

αφήνω zoomLevelLabel = έγγραφο.querySelector(".zoom-level");
αφήνω ζουμ = 2;
αφήνω maxZoomLevel = 5;
αφήνω δείκτηςX;
αφήνω pointerY;
αφήνω magnifyX;
αφήνω μεγεθύνωY;

Στο μπλοκ κωδικών παραπάνω, δείκτηςΧ και δείκτης και τα δύο αντιπροσωπεύουν τη θέση του δρομέα κατά μήκος των αξόνων X και Y.

Τώρα, ορίστε δύο βοηθητικές συναρτήσεις: getZoomLevel που επιστρέφει το τρέχον επίπεδο ζουμ και getPointerPosition που επιστρέφει ένα αντικείμενο με το Χ και y συντεταγμένες του δρομέα.

λειτουργίαgetZoomLevel() {
ΕΠΙΣΤΡΟΦΗ ανίπταμαι διαγωνίως;
}
λειτουργίαgetPointerPosition() {
ΕΠΙΣΤΡΟΦΗ { Χ: pointerX, y: pointerY }
}

Στη συνέχεια, δημιουργήστε μια προσθήκη ενημέρωσηMagImage συνάρτηση που δημιουργεί ένα νέο αντικείμενο MouseEvent με την τρέχουσα θέση του δρομέα και το αποστέλλει στο στοιχείο κοντέινερ. Αυτή η λειτουργία είναι υπεύθυνη για την ενημέρωση της εικόνας του μεγεθυντικού φακού.

λειτουργίαενημέρωσηMagImage() {
αφήνω evt = νέος MouseEvent("μετακίνηση του ποντικιού", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 φυσαλίδες: αληθής,
 ακυρώσιμο: αληθής,
 θέα: παράθυρο,
 });
 container.dispatchEvent (evt);
}

Τώρα, θα πρέπει να προσθέσετε ένας ακροατής εκδήλωσης στο αντικείμενο παραθύρου για το συμβάν "keyup" που προσαρμόζει το επίπεδο ζουμ όταν ο χρήστης πατά τα πλήκτρα "ArrowUp" ή "ArrowDown".

Η λειτουργία επανάκλησης στο συμβάν "keyup" είναι επίσης υπεύθυνη για την ενημέρωση της ετικέτας επιπέδου ζουμ και την ενεργοποίηση του ενημέρωσηMagImage λειτουργία.

παράθυρο.addEventListener("keyup", (ε) => {
αν (π.χ. κλειδί "ArrowUp" &&maxZoomLevel - Αριθμός(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 ζουμ = ζουμ + 0.3;
 updateMagImage();
 }
αν (π.χ. κλειδί "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 ζουμ = ζουμ - 0.3;
 updateMagImage();
 }
});

Στη συνέχεια, προσθέστε ένα πρόγραμμα ακρόασης συμβάντων στο στοιχείο κοντέινερ για το συμβάν "Mosemove".

​​​​​​

Στη συνάρτηση επανάκλησης, προσθέστε τη λειτουργικότητα που αφαιρεί την "κρυφή" κλάση από το στοιχείο μεγεθυντικού φακού στο το κάνει ορατό και υπολογίζει τη θέση του ποντικιού σε σχέση με το κοντέινερ, κάνοντας κύλιση της σελίδας μέσα λογαριασμός.

Αυτή η συνάρτηση θα πρέπει επίσης να ορίσει το στυλ μετασχηματισμού του μεγεθυντικού φακού στην υπολογιζόμενη θέση και προσδιορίστε το μέγεθος φόντου και τη θέση της εικόνας του μεγεθυντικού φακού με βάση το επίπεδο ζουμ και το ποντίκι θέση.

container.addEventListener("μετακίνηση του ποντικιού", (ε) => {
 magnifier.classList.remove("κρυμμένος");
αφήνω rect = container.getBoundingClientRect();
αφήνω x = e.pageX - rect.left;
αφήνω y = e.pageY - rect.top;
 x = x - παράθυρο.scrollX;
 y = y - παράθυρο.κύλιση;


 μεγεθυντικός φακός.στυλ.μετασχηματισμός = `μετάφραση(${x}px, ${y}px)».;
συνθ imgWidth = 400;
συνθ imgΎψος = 300;


 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";


 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -μεγεθύνωY + "px";
});

Στη συνέχεια, προσθέστε ένα άλλο πρόγραμμα ακρόασης συμβάντος στο στοιχείο κοντέινερ, αλλά αυτή τη φορά το πρόγραμμα ακρόασης συμβάντος θα πρέπει να το ακούσει συμβάν "mouseout" και προσθέστε την "κρυφή" κλάση πίσω στο στοιχείο μεγεθυντικού φακού όποτε το ποντίκι βρίσκεται έξω από το κοντέινερ περιοχή.

container.addEventListener("ποντίκι", () => {
 magnifier.classList.add("κρυμμένος");
});

Τέλος, προσθέστε ένα πρόγραμμα ακρόασης συμβάντων στο αντικείμενο του παραθύρου για το συμβάν "moemove" που ενημερώνει τις θέσεις x και y του δρομέα.

παράθυρο.addEventListener("μετακίνηση του ποντικιού", (ε) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Αυτό είναι! Καταφέρατε να δημιουργήσετε ένα μεγεθυντικό φακό εικόνας με JavaScript βανίλιας.

Πώς οι μεγεθυντικοί φακοί εικόνας βελτιώνουν την εμπειρία χρήστη

Επιτρέποντας στους χρήστες να κάνουν ζουμ σε συγκεκριμένες περιοχές μιας εικόνας, ένας μεγεθυντικός φακός τους επιτρέπει να εξετάζουν τις λεπτομέρειες του προϊόντος με μεγαλύτερη ευκρίνεια.

Αυτό το βελτιωμένο επίπεδο οπτικής εξερεύνησης ενσταλάζει την εμπιστοσύνη στους χρήστες καθώς μπορούν να λαμβάνουν τεκμηριωμένες αποφάσεις. Αυτό μπορεί να συμβάλει σε αυξημένα ποσοστά μετατροπών και βελτιωμένη διατήρηση πελατών.