jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen
Donnerstag, 30. Oktober 2008 Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelten , JavaScript-Bibliotheken, die Verwendung von canvas etc. ...
Für rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:
Demo-und Source -
CSS
Wir wissen, dass, abgesehen von IE, können Sie einfach mit abgerundeten Kanten einige spezifische CSS eigenen Browser, wie z. B.:
- / * Runde Ecken * /
- # div (roundBorders
- border-radius: 9px; / * CSS 3 * /
- -moz-border-radius: 9px; / * Firefox * /
- -webkit-border-radius: 9px; / * * Safari /
- )
Hinweis: Ich möchte hier betonen, wie absurd ist dieser Stand der Dinge. Wenn jeder Browser beginnt mit der Definition Ihrer CSS-Stile COASA insgesamt steht vor der Tür. Auch Standard ist, dass, wenn sie "identisch", um alle anderen, dass ist Standard? Es ist nicht wirklich möglich, diesen Stand der Dinge, die zusammenkommen, um eine Bord 4px wir wollen bis 8 Zeilen Code CSS.
Dieses Verfahren, aber das Problem trotz "Rand" funktioniert nicht auf die Bilder. Eine mögliche Lösung ist die Anwendung auf einer der Ecken des immmagine oder alle vier un'alra Bild konstruiert ist, dass es "Simulation" eine abgerundete Kante. In der Praxis können wir überlagern die Bilder von der Kante, um unser Image "Ziel", das Ergebnis der Fähigkeit der PNG-und GIF-Dateien werden mit der Transparenz.
> Pro
- funktioniert auf allen Browsern (Firefox, Opera, Safari, Chrome, Flock, IE 7)
- praktisch, wenn Sie eine schnelle und gezielte un'intervento
- Volle Anpassung des Bildes, die die Kanten, mit der Fähigkeit, jedes Brett
- Javascript kompakte parametrierbar: eine Wahl, über die Ecke des Gesetzes
- braucht keine Style Sheets (CSS)
> Vor
- die Größe des Vorstands und die Farbe ist abhängig von der Bild: Kanten unterschiedlicher Herkunft und unterschiedlichen erfordern unterschiedliche Bilder
- JavaScript aktiviert
Die Technik
Um die vier Ecken an den Kanten eines Bildes wird jQuery bis "wrap" die das img ein div Unter dem das img hinzufügen vier div in absoluten Modus, die sich auf unsere Ecken. Das Script jQuery jquery.roundborders.js ist als Erweiterung, Plugin, und die Methode roundBorders() akzeptiert eine Reihe von Optionen, um die Ecken, die den weichen Bord. Daraus folgt, dass maximal fünf wird div einen Container in den vier Ecken.
Die vier div im Bild oben wird überlagern das Bild, wenn Sie den Stil position in absolute Dann, durch die Nutzung der margin wird eine nach der anderen auf die vier Ecken des Bildes. Hier ist der Code jquery.roundborders.js:
- / **
- * Runde jQuery Grenzen
- *
- * Erstellen Sie eine Bord arrotondado auf einige oder alle der Ecken des Bildes
- * Durch die Überschneidung.
- *
- * @ Author Giovambattista Fazioli
- * @ @ E-Mail g.fazioli undolog.com
- * @ Web http://www.undolog.com
- *
- * @ Usage
- * $ ( 'Myimageid "). RoundBorders (
- * (
- * Bild: 'path / myborder.png',
- * Radius: 16,
- * Ecken: "tl br"
- *)
- *);
- *
- *
- * /
- ( $ ) { (Function ($) (
- = function ( settings ) { jQuery. fn. roundBorders = Funktion (Einstellungen) (
- ( return this. jeder (
- Funktion () (
- this ) ; var $ this = $ (this);
- ; // paganini not repeat var hash = 'ba4aae84ef81'; / / Paganini nicht wiederholen
- !$this. hasClass ( hash ) ) { if (! $ this. hasClass (Hash)) (
- 'display' , 'block' ) ; $ This. Css ( 'display', 'Block');
- var defaults = (
- , Radius: Einstellungen. Radius | | 16
- , Bild: Einstellungen. Image | | 'border.png',
- ( 'width' ) , Breite: Einstellungen. Breite | | $ this. attr ( 'Breite'),
- ( 'height' ) , Höhe: Einstellungen. Höhe | | $ this. attr ( "Höhe"),
- , Center: Einstellungen. center | | "Nein",
- Ecken: Einstellungen. Ecken | | 'tl tr bl br "
- );
- ; var ra = defaults. Radius;
- ; var ww = Standard. Breite;
- ; var hh = defaults. Höhe;
- ; var im = defaults. Bild;
- var-to = hh;
- var tr = ww-ra;
- var bl = bis + HH-ra;
- defaults. center == 'no' ) ? '' : 'margin:0 auto' ; var cc = (defaults. Zentrum == 'keine')?'': "margin: 0 auto';
- ; var out ='';
- . split ( ' ' ) ; var cr = defaults. Ecken. split ('');
- ; var CO = ();
- +im+ ') no-repeat;position:absolute;width:' +ra+ 'px;height:' +ra+ 'px;margin:' +to+ 'px 0 0 0"></div>' ; co. tl = '<div style = "background: url (' + im +") no-repeat; position: absolute; Breite: "+ RA + 'px; Höhe:" + RA +' px; margin: "+ zu + '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 = "background: url (' + im + ') -' + RA + 'px 0px no-repeat; position: absolute; Breite:" + RA +' px; Höhe: "+ RA + 'px; Marge: "+ zu + '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 = "background: url (' + im + ') -' + (ra * 2) + 'px 0px no-repeat; position: absolute; Breite:" + RA +' px; Höhe: " ra + + 'px; margin:' + 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 = "background: url (' + im + ') -' + (ra * 3) + 'px 0px no-repeat; position: absolute; Breite:" + RA +' px; Höhe: " ra + + 'px; margin:' + bl + 'px 0 0' + tr + 'px "> </ div>';
- var o in cr ) if ( co [ cr [ o ] ] ) out += co [ cr [ o ] ] ; for (var oder cr) if (CO [cr [oder]]) aus + = CO [cr [oder]];
- $ 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' ) ; . Nach dem (nicht mehr). AddClass (hash). FadeIn ( 'langsam');
- )
- )
- );
- )
- ; )) (JQuery);
Bild Edge
Wie bereits erwähnt, eine der "Kontrolle" dieser Technik ist die Notwendigkeit, ein Bild, das ist unsere Grenzen. Dieser Nachteil kann jedoch zu einem Vorteil, wenn wir brauchen, um komplexe Kanten und nicht nur "Aufrundung" Klassiker. In jedem Fall sehen wir, wie es getan werden sollte, um das Bild Rand einfach. In unserem Beispiel wollen wir einen abgerundeten Rand 16px. Dann nutzen Sie eine Funktion der Stile, um zu "verschmelzen" Unsere vier Kanten in einem Bild. Damit wird ein Bild von 64x16 Pixel, wie unten dargestellt:
(Downloaden Sie die Datei, PSD oder PNG)
Jeder Kasten ist eine Ecke und die Größe von 16x16 Pixel. Der Hintergrund ist die schwarze Farbe transparent und Weiß ist die Farbe des Hintergrundes, wo es unser Bild. Wenn Ihre Website hat einen anderen Hintergrund ersetzt nur die weiße Farbe mit dem Ihrer Website. Das Bild ist dann:
Die Reihenfolge der Ecken, müssen Sie oben links (oben links), rechts oben (rechts oben), unten links (der unteren Ecke von links) und rechts unten (untere rechte Ecke).
Hinterlasse einen Kommentar