jQuery: στρογγυλεμένες ακμές στις εικόνες για επικάλυψη
Πέμπτη, 30 Οκτωβρίου 2008 Λόγω των διαφορετικών καθιστώντας τα διάφορα προγράμματα περιήγησης, το οποίο είναι σίγουρα το Microsoft Internet Explorer κατά νου, θα πρέπει πάντα να καταφεύγουν σε τεχνάσματα που εφαρμόζονται για ενέργειες που θα πρέπει τώρα να είναι ένα πρότυπο. Η πολυ-συζητήθηκε στρογγυλεμένες άκρες του είναι ένα κλασικό παράδειγμα της "καταστροφής" που παράγεται από την πλήρη αδυναμία της να επιτύχει ένα πρότυπο για την παροχή σοβαρών HTML / CSS. Υπάρχουν πολλές online λύσεις που σας επιτρέπουν να αποκτήσουν τα "αποτελέσματα" (αποτελέσματα εξαιρώντας dall'HTML παρόντες όπως στρογγυλεμένες γωνίες, σκιά αποτελέσματα, αντανακλάσεις, κλπ. ...) με μπαλώματα στα φύλλα του στυλ, ειδικά κόλπα με τη χρήση του div μπολιασμένα , βιβλιοθήκες Javascript, χρήση του canvas κτλ ...
Για καθαρά εκπαιδευτικούς θα ήθελα να εξηγήσω περαιτέρω τεχνική (πολλαπλή browser) για να εφαρμόσει τις στρογγυλεμένες άκρες με εικόνες:
Επίδειξη και πηγή
- Ολοκλήρωση έργου στο Google Κώδικας
- demo
- jquery.roundborders.js
- εικόνας στο Photoshop
- PNG μορφή εικόνας
CSS
Γνωρίζουμε ότι, εκτός από IE, μπορείτε να κάνετε στρογγυλεμένες άκρες απλά χρησιμοποιώντας κάποιες ειδικές CSS δικό του περιηγητές, όπως:
- / * Στρογγυλοποιημένα Corners * /
- div # (roundBorders
- συνόρων-ακτίνα: 9px? / * CSS 3 * /
- -MOZ-σύνορα-ακτίνα: 9px? / * Firefox * /
- -webkit-σύνορα-ακτίνα: 9px? / * Safari * /
- )
Σημείωση: Θα ήθελα εδώ να τονίσω πόσο ανόητη είναι η κατάσταση. Αν αρχίζει κάθε browser σας για να καθορίσει CSS στυλ COASA σύνολο είναι πάνω μας. Επίσης πρότυπο είναι ότι όταν είναι "ταυτόσημη" με όλους τους άλλους ότι είναι πρότυπο; Δεν είναι πράγματι δυνατόν να αποδεχθεί αυτή την κατάσταση, η οποία συνεδριάζει για να ορίσετε ένα συμβούλιο 4px θέλουμε σε 8 γραμμές κώδικα CSS.
Η διαδικασία αυτή, ωστόσο, παρά την επίλυση του θέματος "άκρο" δεν λειτουργεί σε εικόνες. Έτσι, μια πιθανή λύση είναι να εφαρμόζεται σε κάθε μία από τις γωνιές του immmagine ή τέσσερις, un'alra εικόνα κατασκευάζονται έτσι ώστε να "προσομοίωση" στρογγυλή άκρη. Στην πράξη, μπορούμε να υπερκαλύψει τις εικόνες από την άκρη προς την εικόνα μας "στόχου", το αποτέλεσμα της ικανότητας της PNG και GIF αρχεία που πρέπει να γίνουν με διαφάνεια.
> Pro
- έργων σε όλους τους φυλλομετρητές (FireFox, Opera, Safari, Chrome, Flock, IE 7)
- βολικό όταν χρειάζεται ταχεία και στοχοθετημένη un'intervento
- Πλήρης παραμετροποίηση της εικόνας που αντιπροσωπεύει τα άκρα, με τη δυνατότητα να προσαρμόσετε κάθε σκάφους
- Javascript συμπαγής parameterizable: μια επιλογή για την οποία γωνία της πράξης
- δεν χρειάζεται φύλλα στυλ (CSS)
> Με βάση
- το μέγεθος του σκάφους και το χρώμα εξαρτάται από την εικόνα: άκρα διαφορετικά υπόβαθρα και διαφορετικών απαιτούν διαφορετικές εικόνες
- Ενεργοποιηθεί το JavaScript
Η τεχνική
Για να εφαρμόσετε τις τέσσερις γωνίες προς τα άκρα για την εικόνα που θα χρησιμοποιούν jQuery να "WRAP" την ετικέτα img ένα div περιέκτη. Κάτω από την ετικέτα img προσθέσει τέσσερις div τοποθετημένα σε απόλυτη λειτουργία, οι οποίες αντιστοιχούν στις γωνίες μας. Το σενάριο jQuery jquery.roundborders.js είναι χτισμένη ως επέκταση, plugin, καθώς και η μέθοδος roundBorders() δέχεται μια σειρά από επιλογές για τις γωνίες που κάνουν τα μαλακά του σκάφους. Από τα ανωτέρω προκύπτει ότι το μέγιστο για πέντε θα προστεθεί div ένα δοχείο πάνω από τις τέσσερις γωνιές.
Οι τέσσερις div φαίνεται στην εικόνα παραπάνω θα υπερκαλύψει την εικόνα κατά τον καθορισμό του στυλ position σε absolute Στη συνέχεια, με τη χρήση του margin θα δοθεί μία προς μία στις τέσσερις γωνίες της εικόνας. Εδώ είναι ο κωδικός jquery.roundborders.js:
- / **
- * Γύρου jQuery Σύνορα
- *
- * Δημιουργία ενός σκάφους arrotondado για ορισμένες ή όλες τις γωνιές της εικόνας
- * Μέσω της επικάλυψης.
- *
- * @ Συντάκτης Giovambattista Fazioli
- * @email g.fazioli@undolog.com
- * @ Web http://www.undolog.com
- *
- * @ Usage
- * $ ( «Myimageid»). RoundBorders (
- * (
- * Εικόνα: "path / myborder.png»,
- * Radius: 16,
- * Corners: «TL br"
- *)
- *)?
- *
- *
- * /
- ( $ ) { (Function ($) (
- = function ( settings ) { jQuery. fn. roundBorders = λειτουργία (Ρυθμίσεις) (
- ( επιστρέψετε αυτό. καθένα (
- λειτουργία () (
- this ) ; var $ this = $ (αυτή)?
- ; // paganini not repeat var hash = 'ba4aae84ef81'? / / Paganini δεν επαναλαμβάνουν
- !$this. hasClass ( hash ) ) { if (! $ αυτό. hasClass (hash)) (
- 'display' , 'block' ) ; $ Αυτό. Css ( «οθόνη», «μπλοκάρουν»)?
- var αθετήσεις = (
- , ακτίνα: ρυθμίσεις. ακτίνα | | 16
- , εικόνας: ρυθμίσεις. εικόνας | | 'border.png »,
- ( 'width' ) , πλάτος: ρυθμίσεις. πλάτος | | $ αυτό. attr ( «πλάτος»),
- ( 'height' ) , ύψος: ρυθμίσεις. ύψους | | $ αυτό. attr ( «ύψος»),
- , Κέντρο: ρυθμίσεις. κέντρο | | "δεν",
- γωνίες: ρυθμίσεις. γωνίες | | 'TL tr bl br "
- )?
- ; var ra = αθετήσεις. ακτίνα?
- ; var ww = αθετήσεις. πλάτος?
- ; var hh = αθετήσεις. ύψους?
- ; var im = αθετήσεις. εικόνας?
- var-να hh =?
- var tr = ww-ra?
- var = bl έως + hh-ra?
- defaults. center == 'no' ) ? '' : 'margin:0 auto' ; var cc = (defaults. κέντρο == "δεν')?'':« περιθώριο: 0 auto "?
- ; var out =''?
- . split ( ' ' ) ; var cr = αθετήσεις. γωνίες. διαίρεσης ('')?
- ; var co = ()?
- +im+ ') no-repeat;position:absolute;width:' +ra+ 'px;height:' +ra+ 'px;margin:' +to+ 'px 0 0 0"></div>' ; co. TL = '<div style = "υπόβαθρο: url (" + im + ") δεν επαναλαμβάνω-? θέση: απόλυτη? πλάτος:" + ra + "px? ύψος:" + ra + "px? περιθώριο:" + + να "px 0 0 0 "> </ div> '?
- +im+ ') -' +ra+ 'px 0px no-repeat;position:absolute;width:' +ra+ 'px;height:' +ra+ 'px;margin:' +to+ 'px 0 0 ' +tr+ 'px"></div>' ; co. tr = '<div style = "υπόβαθρο: url (" + im + ") -" + ra + "px δεν 0px-επαναλαμβάνω? θέση: απόλυτη? πλάτος:" + ra + "px? ύψος:" + ra + "px? περιθώριο: "+ + να" px 0 0 "tr + +" px "> </ div> '?
- +im+ ') -' + ( ra* 2 ) + 'px 0px no-repeat;position:absolute;width:' +ra+ 'px;height:' +ra+ 'px;margin:' +bl+ 'px 0 0 0"></div>' ; co. bl = '<div style = "υπόβαθρο: url (" + im + ») -' + (ra * 2) + 'px δεν 0px-επαναλαμβάνω? θέση: απόλυτη? πλάτος:" + ra + "px? ύψος:" ra + + 'px? περιθώριο: «bl + +' px 0 0 0"> </ div> '?
- +im+ ') -' + ( ra* 3 ) + 'px 0px no-repeat;position:absolute;width:' +ra+ 'px;height:' +ra+ 'px;margin:' +bl+ 'px 0 0 ' +tr+ 'px"></div>' ; co. br = '<div style = "υπόβαθρο: url (" + im + ») -' + (ra * 3) +" px δεν 0px-επαναλαμβάνω? θέση: απόλυτη? πλάτος: "+ ra +" px? ύψος: " ra + + 'px? περιθώριο: «bl + +' px 0 0" tr + + "px"> </ div> '?
- var o in cr ) if ( co [ cr [ o ] ] ) out += co [ cr [ o ] ] ; για (var ή cr) αν (συν [cr [ή]]) + = συν out [cr [ή]]?
- $ This
- '<div style="width:' +ww+ 'px;height:' +hh+ 'px;' +cc+ '"></div>' ) . Wrap ( «<div style="width:' +ww+'px;height:' +hh+'px;' +cc+'"> </ div> ')
- out ) . addClass ( hash ) . fadeIn ( 'slow' ) ; . Αφού (έξοδος). AddClass (hash). FadeIn ( «αργό»)?
- )
- )
- )?
- )
- ; )) (JQuery)?
Image Edge
Όπως αναφέρθηκε προηγουμένως, ένα από τα "ελέγχου" της τεχνικής αυτής είναι η ανάγκη να δημιουργηθεί μια εικόνα που αντιπροσωπεύει τα σύνορά μας. Το μειονέκτημα αυτό, ωστόσο, μπορεί να αποτελέσει πλεονέκτημα, αν πρέπει να δημιουργήσουμε περίπλοκες άκρα και δεν αφορά μόνο "στρογγυλοποίηση" κλασικό. Σε κάθε περίπτωση, θα δούμε πώς θα πρέπει να γίνει για την εικόνα άκρο απλό. Στο παράδειγμά μας θέλουμε να δημιουργήσουμε μια στρογγυλή άκρη της 16px. Στη συνέχεια εκμεταλλεύονται ένα χαρακτηριστικό του στυλ, για να "συγχώνευση" μας τέσσερα άκρα σε μια ενιαία εικόνα. Αυτό θα δώσει μια ενιαία εικόνα της 64x16 pixels, όπως φαίνεται παρακάτω:
(κατεβάστε το αρχείο PSD ή PNG)
Κάθε κουτί έχει μια γωνία και το μέγεθος του 16x16 pixels. Το φόντο είναι το μαύρο χρώμα είναι διαφανές και το λευκό χρώμα για το φόντο όπου υπάρχει εικόνα μας. Εάν ο ιστότοπός σας έχει διαφορετικό υπόβαθρο αντικαταστήσει μόνο το άσπρο με το χρώμα του δικτυακού σας τόπου. Η εικόνα είναι τότε:
Η σειρά των γωνιών, θα πρέπει να: πάνω αριστερά (επάνω αριστερή γωνία), πάνω δεξιά (πάνω δεξιά γωνία), κάτω αριστερά (κάτω γωνία από την αριστερή πτέρυγα) και κάτω δεξιά (κάτω δεξιά γωνία).
Αφήστε ένα σχόλιο