Περιεχόμενο
Η παροχή στους επισκέπτες του ιστότοπού σας της ευκαιρίας να δουν λεπτομερώς μια εικόνα απαιτεί λίγη χειραγώγηση αυτών των φωτογραφιών. Προσθέτοντας ένα μικρό CSS, JavaScript και jQuery στη σύνθεση μπορείτε να δημιουργήσετε το αποτέλεσμα ενός μεγεθυντικού φακού καθώς ο δείκτης του ποντικιού μετακινείται πάνω από μια εικόνα στη σελίδα σας. Αυτό το αποτέλεσμα επιτυγχάνεται δημιουργώντας ένα μικρό παράθυρο που εμφανίζει την εικόνα φόντου όταν ο δείκτης του ποντικιού μετακινείται πάνω από την εικόνα που εμφανίζεται στο προσκήνιο.
Οδηγίες
-
Συμπεριλάβετε το JavaScript και το jQuery στην ενότητα "head" του κώδικα HTML με τις οδηγίες:
Σε αυτό το παράδειγμα, η βιβλιοθήκη jQuery βρίσκεται στον προεπιλεγμένο κατάλογο HTML.
-
Εισαγάγετε μια ετικέτα CDATA για να αποτρέψετε τις προσπάθειες του προγράμματος περιήγησης να αναλύσει τους χειριστές jQuery:
-
Ορίστε τις μεταβλητές ύψους και πλάτους που χρησιμοποιούνται για την εμφάνιση των εικόνων:
var W = 743; var Η = 1155; var νν = 192; var h = 300;
-
Ορίστε τις συνθήκες που ξεκινούν τη λειτουργία μεγέθυνσης. Όταν καλείται, αυτή η λειτουργία αντικαθιστά τον δείκτη του ποντικιού με έναν κυκλικό προβολέα της μεγαλύτερης καλυμμένης εικόνας, όταν ο χρήστης αιωρείται πάνω από τη μικρότερη εικόνα που εμφανίζεται στη σελίδα. Δημιουργήστε αυτήν την εμφάνιση με τον κώδικα:
$ (έγγραφο) .ready (λειτουργία () {
$ ("# myimage") ποντίκι (λειτουργία (e) {$ (έγγραφο) .mousemove (myMM);
});
-
Ρυθμίστε τη λειτουργία μεγέθυνσης και τις παραμέτρους οριστικοποίησης. Σε αυτό το παράδειγμα, η κρυφή εικόνα μεγεθύνεται κατά το διπλάσιο του μεγέθους της μικρότερης εικόνας και το παράθυρο μεγέθυνσης εξαφανίζεται όταν ο δείκτης του ποντικιού μετακινείται εκτός των ορίων της μικρότερης εικόνας. Μπορείτε να το κάνετε αυτό με τον κωδικό:
λειτουργία myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# γυαλί-εικόνα"); var γυαλί = $ ("# γυαλί"); var xs = e.pageX - myImage.offset () αριστερά; var ys = e.pageY - myImage.offset (). var bx = glassImage.width () / 2 - xsW / w; var από = glassImage.height () / 2 - ysH / h; γυαλί.css ("αριστερά", e.pageX-75-89 + "px") css ("άνω", e.pageY-75-10 + "px"); glassImage.css ("φόντο-θέση", bx + "px" + από + "px")? εάν (bx <-W || από <-H || bx> 150 || από> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('γρήγορο'); }}
-
Κλείστε το "script" του jQuery και διαγράψτε τον αναλυτή CDATA με τις οδηγίες:
// ]]>
-
Ορίστε τη διάταξη σελίδας με το CSS για να τοποθετήσετε τη μεγαλύτερη εικόνα φόντου και τα όρια του παραθύρου μεγέθυνσης με τον κώδικα:
type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; Θέση φόντου: πάνω αριστερά. πλάτος: 250px; ύψος: 170px; padding-top: 10px; padding-left: 89px; περιθώριο: 0; θέση: απόλυτη; οθόνη: καμία · } # γυάλινη εικόνα {φόντο-εικόνα: url ('myImageLarge.jpg'); πλάτος: 150px; ύψος: 150px; ακτίνα-ακτίνα: 75px; -moz-border-radius: 75px; αναπαράσταση φόντου: όχι-επανάληψη χρώμα φόντου: #fff; περιθώριο: 0; padding: 0; δρομέας: κανένας; }} -
Γράψτε τον κώδικα HTML για να εμφανίσετε τη σελίδα στην ενότητα "σώμα":
>
Μετακινήστε το ποντίκι πάνω στην εικόνα
Πώς
- Αυτός ο κώδικας εξαρτάται από το CSS3 για να δημιουργηθεί ένα πεδίο στρογγυλής μεγέθυνσης και ενδέχεται να μην λειτουργεί σε παλαιότερα προγράμματα περιήγησης. Για την προς τα πίσω συμβατότητα με παλαιότερες εφαρμογές CSS, ορίστε ένα ορθογώνιο πεδίο για "# glass-image" (μεγεθυντικός φακός).
Ανακοίνωση
- Χωρίς τις ετικέτες CDATA, τα προγράμματα περιήγησης προσπαθούν να αναλύσουν χειριστές λιγότερο από "<" και μεγαλύτερες από ">" ως ετικέτες HTML. Συμπεριλάβετε πάντα τους χειριστές JavaScript και jQuery με τις ετικέτες CDATA για να αποφύγετε αποτυχίες "script".