Barra laterale
programmazione:jquery:gli_effetti
Gli effetti grafici di jquery
Autore: Fabio Di Matteo
Ultima revisione: 11/04/2010
Con jquery è possibile applicare facilmente degli effetti grafici ai tag <div> della nostra pagina. Gli effetti di jquery sono tanti, in questo articolo vedremo come fare “pulsare” un' immagine al click di un link.
Ecco un esempio (clicca qui sotto sul link):
www.freemedialab.orgIl codice
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> #miodiv { margin: 0px; width: 128px; height: 91px; border: 0px solid white; position: relative; display: none} </style> <script type="text/javascript" > function clicca(){ // facciamo pulsare la nostra immagine :) $("#miodiv").fadeIn(2000); $("#miodiv").fadeOut(2000); $("#miodiv").fadeIn(2000); }; </script> </head> <body> <a href="#" Onclick="clicca()">clicca</a><br><br><br><br> <div id="miodiv" class="miodiv" > <img src="https://www.freemedialab.org/wiki/lib/tpl/monobook/user/logo.png" border="0" alt="">www.freemedialab.org </div> </body> </html>
Come possiamo vedere il grosso del lavoro è fatto dalla funzione clicca() che lancia le tre funzioni che applicano gli effetti fade sul nostro miodiv .
programmazione/jquery/gli_effetti.txt · Ultima modifica: 18/04/2018 - 15:49 (modifica esterna)
Strumenti Pagina
Ad eccezione da dove è diversamente indicato, il contenuto di questo wiki è soggetto alla seguente licenza: CC Attribution-Share Alike 4.0 International
