Πώς να δημιουργήσετε καθαρό CSS Image onClick Zoom Effect

Το CSS δεν έχει ψευδοκλάση για στοχεύοντας στα συμβάντα κλικ, και αυτό αποτελεί ένα από τα τα μεγαλύτερα σημεία πόνου των πρωτοπόρων προγραμματιστών. Η πλησιέστερη ψευδο-τάξη είναι :ενεργός το οποίο στυλίζει ένα στοιχείο για το χρονικό διάστημα που ένας χρήστης πιέζει το ποντίκι πάνω του.

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

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

Μπορείτε να δείτε το τελικό αποτέλεσμα παρακάτω - μια λύση μόνο για το CSS για εικόνα μεγέθυνση με κλικ.

Πότε πρέπει να χρησιμοποιήσετε τη λύση μόνο για CSS

Πριν προχωρήσω, θέλω να πω ότι για το ζουμ εικόνας προτείνω τη μέθοδο μόνο CSS (η οποία αλλάζει τις διαστάσεις της εικόνας), μόνο όταν θέλετε μονόκλινο ή α ομάδα λίγων εικόνων για να έχετε τη δυνατότητα ζουμ.

Για ένα κατάλληλος gallery, το JavaScript προσφέρει μεγαλύτερη ευελιξία και αποτελεσματικότητα.

Τεχνικές Front-End θα χρησιμοποιήσουμε

Τώρα που έχετε προειδοποιήσει, ας δούμε γρήγορα το 3 βασικές τεχνικές θα χρησιμοποιήσουμε:

1. ο Ετικέτα HTML που επιτρέπει στα προγράμματα περιήγησης δημιουργούν συνδέσιμες περιοχές πάνω από μια εικόνα. Διαβάστε περισσότερα σχετικά με το στοιχείο στην προηγούμενη θέση μου.
2. ο usemap χαρακτηριστικό του ετικέτα, που συνδέει την εικόνα με τον χάρτη εικόνας.
3. ο :στόχος CSS ψευδο-τάξη που αντιπροσωπεύει ένα στοιχείο στο οποίο έχει γίνει στόχευση χρησιμοποιώντας τον επιλογέα ταυτότητας.

1. Δημιουργήστε τη Βάση HTML

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

Είναι σημαντικό να έχετε ένα αναγνωριστικό στην εικόνα για μεγέθυνση και το κουμπί Κλείσιμο πρέπει να είναι ένας σύνδεσμος που έχει το href = "#" χαρακτηριστικό, θα εξηγήσω γιατί αργότερα στη θέση.

2. Προσθέστε το CSS

Αρχικά, το εικονίδιο Κλείσιμο δεν θα πρέπει να εμφανίζονται. ο θέση, περιθώριο-, αριστερά, και κάτω μέρος ιδιότητες θέση ο Επεκτείνετε και κλείστε τα εικονίδια όπου θέλουμε να είναι - στην πάνω δεξιά γωνία της εικόνας.

ο δείκτες-δείκτες: κανένας. Ο κανόνας επιτρέπει στα συμβάντα του ποντικιού Περάστε μέσα από το εικονίδιο Expand και φθάνουν στην εικόνα.

 .img ύψος: 150px; πλάτος: 200px;  .Κλείσιμο background-image: url ("Close-icon.png"); αναπαράσταση φόντου: όχι-επανάληψη κάτω: 418px; οθόνη: καμία · ύψος: 32px; αριστερά: 462px; περιθώριο-κορυφή: -32px; θέση: σχετική. πλάτος: 32px;  .expand κάτω: 125px; περιθώριο-αριστερά: -32px. περιθώριο-δεξιά: 16px; δείκτες-δείκτες: κανένας. θέση: σχετική.  

3. Προσθέστε τον Χάρτη εικόνας

Στο χάρτη εικόνων, το στην περιοχή με δυνατότητα κλικ πρέπει να είναι στην πάνω δεξιά γωνία της εικόνας ακριβώς κάτω από το εικονίδιο "Ανάπτυξη" και το μέγεθος του. Τοποθετήστε το στοιχείο πριν από την πρώτη ετικέτα στο HTML. Θα δεσμεύσουμε την εικόνα στο χάρτη στο επόμενο βήμα.

Στο μπλοκ κώδικα παραπάνω, το ετικέτα ορίζει το το σχήμα, το μέγεθος και το URI μιας συνδέσιμης περιοχής μέσα σε έναν χάρτη εικόνων. Για ένα ορθογώνιο σχήμα, ο σχήμα attribute παίρνει το rect τιμή, και το τέσσερις τιμές απο coords attribute αντιπροσωπεύουν την απόσταση σε εικονοστοιχεία μεταξύ:

1. το αριστερό άκρο της εικόνας και το αριστερό άκρο της περιοχής σύνδεσης
2. το επάνω άκρο της εικόνας και το επάνω άκρο της περιοχής σύνδεσης
3. το αριστερό άκρο της εικόνας και το δεξί άκρο της περιοχής σύνδεσης
4. το επάνω άκρο της εικόνας και το κάτω άκρο της περιοχής σύνδεσης

Η αξία του href χαρακτηριστικό πρέπει να είναι το hash αναγνωριστικό της εικόνας (γι 'αυτό η εικόνα θα πρέπει να έχει ένα ταυτότητα).

4. Δεσμεύστε την εικόνα στο χάρτη εικόνας

Πρόσθεσε το usemap αποδίδουν στην εικόνα έτσι ώστε να δεσμεύστε το στον χάρτη εικόνας. Η αξία του πρέπει να είναι η τιμή hash εκπροσώπηση του όνομα χαρακτηριστικό του ετικέτα προσθέσαμε στο Βήμα 3.

Η περιοχή με δυνατότητα κλικ στο χάρτη της εικόνας τώρα βρίσκεται πίσω από το κουμπί Expand. Όταν ο χρήστης κάνει κλικ στο κουμπί Ανάπτυξη, είναι η περιοχή με δυνατότητα κλικ στην οποία γίνεται κλικ στην πραγματικότητα - θυμηθείτε ότι κάναμε το κουμπί Ανάπτυξη “μέτριος” με το δείκτες-δείκτες: κανένας. κανόνα στο Βήμα 2.

Έτσι ο χρήστης στοχεύει στην ίδια την εικόνα κάνοντας κλικ σε αυτό, και μετά το κλικ το URI παίρνει επιλεχθεί με το "# img1" αναγνωριστικό θραύσματος.

5. Στυλ το :στόχος Ψευδο-τάξη

Μέχρι το "# img1" αναγνωριστικό θραύσματος βρίσκεται στο τέλος του URI, η εικόνα που στοχεύει μπορεί να είναι στυλ με το :στόχος ψευδο-τάξη

Οι διαστάσεις της στοχευμένης εικόνας αυξάνουν, εμφανίζεται το κουμπί Κλείσιμο και το κουμπί Expand αποκρύπτεται.

 .img: στόχος ύψος: 450px; πλάτος: 500px;  .img: target + .close εμφάνιση: μπλοκ;  .img: στόχος +. κλείσιμο + .expand εμφάνιση: κανένας;  

Πώς λειτουργεί το κουμπί κλεισίματος

Καθώς το κουμπί Κλείσιμο προστέθηκε ως εικόνα φόντου (Βήμα 2) και είναι πραγματικά ένα ετικέτα με το href = # (βήμα 1), όταν πατηθεί, αφαιρεί το αναγνωριστικό θραύσματος από το τέλος του URI. Ως εκ τούτου, επίσης αφαιρεί το :στόχος ψευδο-τάξη από την εικόνα και την εικόνα επιστρέφει στο προηγούμενο μέγεθός του.

Πληροφορίες Background: Γιατί και οχι ?

Μέχρι τώρα, σίγουρα καταλαβαίνετε ότι το πιο σημαντικό πράγμα για αυτή τη λύση CSS-μόνο για να εργαστεί είναι να στοχεύστε την εικόνα χρησιμοποιώντας το href = "# imgid" Χαρακτηριστικό, που θα μπορούσε επίσης να γίνει χρησιμοποιώντας το ετικέτα αντί του χάρτη εικόνων.

ο Προκαθορισμένο αξία για σχήμα Το χαρακτηριστικό δημιουργεί ένα ορθογώνια δυνατότητα σύνδεσης που καλύπτει ολόκληρη την εικόνα. Αν έπρεπε να χρησιμοποιήσετε Αντίθετα, θα πρέπει να το κωδικοποιήσετε για να καλύψετε την εικόνα και ίσως χρειαστεί να χρησιμοποιήσετε ένα στοιχείο περιτυλίγματος για τον ίδιο σκοπό.

Για να υποστηρίξετε προγράμματα περιήγησης IE πριν από αυτό, ίσως να θέλετε να χρησιμοποιήσετε αντί , ή να κάνετε μεγέθυνση της εικόνας κάνοντας κλικ οπουδήποτε σε αυτήν (στην περίπτωση αυτή δεν θα χρειαστεί να εμφανιστεί το εικονίδιο Expand).