estrellas liveUpOs acordáis de SuperMario cuando cogía una vida nueva? pues el otro día pensando en como avisar a los usuarios de alertas gráficamente sin abrir alert() o PopUp innecesarios me acorde de eso mismo.. y fruto de esa idea ha salido este código..

Se trata de una función que al ejecutarla muestra una imagen sobre el elemento indicado, desvaneciéndose y subiendo en un tiempo determinado.

Para ejecutar la función tenemos que poner como primer parámetro el identificador del objeto, ya sea el nombre del tag HTML, del ID o de la clase como en cualquier elemento jQuery es decir, si es un ID con # delante y si es una clase con . delante.
El siguiente parámetro es la dirección de la imagen que queremos que se abra cuando se ejecute la función. El tercer y cuarto valor es respectivamente el alto y ancho de la imagen que vamos a mostrar, el quinto (la variable zenit) es la altura que va a alcanzar la imagen al desaparecer (por defecto esta en 100px). El ultimo valor es el tiempo que tarda en desvanecerse el objeto seleccionado, el tiempo predeterminado es 1 segundo pero si se quiere poner uno hay que ponerlo en ms (1s = 1000).

PLAIN TEXT
JavaScript:
  1. function liveUp(id, img, h, w, zenit, wait){
  2.     if(img==null)      img        = 'star.png';
  3.     if(h==  null)      h    = '32';
  4.     if(w==  null)      w    = '32';
  5.     if(zenit== null)    zenit   = 50;
  6.     if(wait== null)  wait = 100;
  7.     $(id).each(
  8.         function(i, domEle){
  9.             var d         = new Date().getTime();
  10.             var liveUpId    = id+'_'+i+'_'+d; //i;'_LiVE_Up'+
  11.             liveUpId        = liveUpId.replace('#', '_');
  12.             var offset    = $(domEle).offset();
  13.             var object    = '<img id="'+liveUpId+'" src="'+img+'" height="'+h+'" width="'+w+'" />';
  14.            
  15.             $('body').append(object);
  16.            
  17.             $('#'+liveUpId)
  18.                 .animate({opacity: 1.0}, wait)
  19.                 .css({'visibility':'visible', '':''})
  20.                 .css({'position':'absolute'})
  21.                 .css({'top':offset['top'], 'left':(offset['left']+($(domEle).width()/2)-(w/2) )})
  22.                 .animate({opacity: 0.0, top: offset['top']-zenit}, 1000,
  23.                     function (){
  24.                         $('#'+liveUpId).remove();
  25.                     }
  26.                 )
  27.             ;
  28.         }
  29.     );
  30. }

Este código es una función que usa jQuery y jQuery.Easing para ejecutar los efectos base.. ha sido testado en Firefox3, Safari4 y IE7.0.5730.11IC bajo winXP.

A continuación os dejo un ejemplo. Para hacerlo funcionar solo tenéis que guardar con extensión html.

PLAIN TEXT
HTML:
  1. <html style="background:gray; color: white;">
  2.     <head>
  3.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  4.         <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js" type="text/javascript"></script>
  5.         <script type="text/javascript">
  6.  
  7.             function liveUp(id, img, h, w, zenit, wait){
  8.                 if(img==null)      img        = 'star.png';
  9.                 if(h==  null)      h    = '32';
  10.                 if(w==  null)      w    = '32';
  11.                 if(zenit== null)    zenit   = 50;
  12.                 if(wait== null)  wait = 100;
  13.                 $(id).each(
  14.                     function(i, domEle){
  15.                         var d         = new Date().getTime();
  16.                         var liveUpId    = id+'_'+i+'_'+d; //i;'_LiVE_Up'+
  17.                         liveUpId        = liveUpId.replace('#', '_');
  18.                         var offset    = $(domEle).offset();
  19.                         var object    = '<img id="'+liveUpId+'" src="'+img+'" height="'+h+'" width="'+w+'" />';
  20.                        
  21.                         $('body').append(object);
  22.                        
  23.                         $('#'+liveUpId)
  24.                             .animate({opacity: 1.0}, wait)
  25.                             .css({'visibility':'visible', '':''})
  26.                             .css({'position':'absolute'})
  27.                             .css({'top':offset['top'], 'left':(offset['left']+($(domEle).width()/2)-(w/2) )})
  28.                             .animate({opacity: 0.0, top: offset['top']-zenit}, 1000,
  29.                                 function (){
  30.                                     $('#'+liveUpId).remove();
  31.                                 }
  32.                             )
  33.                                    
  34.                         ;
  35.                     }
  36.                 );
  37.             }
  38.            
  39.             //direccion de la imagen... en base64 para que funcione directamente con el archivo
  40.             var url_imagen = 'data:image/png;base64,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';   </script>
  41.         <title></title>
  42.     </head>
  43.     <body>
  44.         <br /><br /><br /><br /><br /><br /><br /><br /><br />
  45.         <b id="estrella" onclick="liveUp('#estrella', url_imagen, 20, 20)">
  46.             pulsa aqui para ver como sale una estrella de 20px por 20px
  47.         </b>
  48.         <br /><br /><br /><br /><br /><br /><br /><br /><br />
  49.         <b id="logo" onclick="liveUp('#logo', 'http://www.tierra0.com/wp-content/themes/satori/images/LogoTierra0-2.gif', 100, 200, null, 200)">
  50.             pulsa aqui para ver como sale el logo de google pero mucho mas lento
  51.         </b>
  52.         <p>Ejemplo creado en tierra0.com, mas info en <a href="http://www.tierra0.com/2009/09/07/efecto-con-jquery-tipo-liveup/">tutorial de liveUp</a></p>
  53.     </body>
  54. </html>

Para problemas ruegos y preguntas los comentarios, y para donaciones, invitadme a un café ;)