Loading:

Promocja Helion.pl

Jak zrobić zaokrąglone rogi obrazka dla wszystkich przeglądarek - JQuery plugin

Aby zrobić zaokrąglone rogi na obrazku kompatybilne ze wszystkimi przeglądarkami, użyjemy dodatku do JQuery corner.


Jak kożystać z biblioteki JQuery corner wyjaśniłem w artykule:

[ Jak zrobić zaokrąglone rogi za pomocą CSS i JavaScript - JQuery Corner ]

 

Artykuł powyżej pokazywał jak zrobić zaokrąglone rogi na warstwie div, teraz przedstawię wam jak to zrobić bezpośrednio na obrazku.


[ Zobacz efekt ]

 

[ Pobierz skrypt ]

 

[ Strona projektu ]

 

Zasada działania jest prosta na początek zaciągamy biblioteki JQuery:

<script type="text/javascript" src="img_corner_pliki/jquery-1.js"></script>
<script type="text/javascript" src="img_corner_pliki/jquery.js"></script>

 

Poten ten krótki skrypcik:

<script type="text/javascript">
$.fn.corner.defaults.useNative = false;
$(document).ready(function(){
        $("#imgBox").corner("15px");
    });
</script>

 

I teraz rzecz główna tworzymy div o unikalnym id  w naszym przypadku przykłądowy imgBox a poniżej odpalamy skrypt JQuery zaokrąglający rogi:

<div id="imgBox" style="width:200px; height:200px; margin:0;padding:0">
<img src="beach1.jpg" />
</div>


<script type="text/javascript">
$(document).ready(function(){
    $("#imgBox").corner("15px");
});
</script>



Napisz Artykuł

Listing

niema


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=4342

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors