Descargas, guías, trucos, gameplays...

viernes, 25 de diciembre de 2015

Animar elementos al pasar cursor sobre otros con jQuery






Una práctica muy útil para ahorrar espacio en nuestras aplicaciones es poder mostrar elementos al pasar el cursor sobre otros, por ejemplo notas aclaratorias, comentarios imágenes, etc.

jQuery facilita mucho esta labor.


Código.gs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
function doGet() {
  var html = HtmlService.createTemplateFromFile("page").evaluate();
  html.setTitle("Animar elementos");
  return html;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .setSandboxMode(HtmlService.SandboxMode.IFRAME)
      .getContent();
}



page.html
1
2
3
4
5
6
7
<?!= include('css'); ?>
<?!= include('js'); ?>

<div id="global">
    <img id="comentario" src="http://drive.google.com/uc?export=view&id=0B1SOjZgUAnEMVUVtYmhMSmoycUE"/>
    <img id="usuario" src="http://drive.google.com/uc?export=view&id=0B1SOjZgUAnEMeUtCMXBLVGVuWlk"/>
</div>



css.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<style>
#global{
    width:100%;
    position:relative;
}

#comentario{
    position:absolute;
    left:200px;
    top:200px;
    display:none;
}

#usuario{
    position:absolute;
    left:218px;
    top:300px;
}
</style>



js.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
    $("#usuario").mouseover(function(){
        $("#comentario").fadeIn(500);
    });

    $("#usuario").mouseleave(function(){
        $("#comentario").fadeOut(500);
    });
});
</script>



No hay comentarios:

Publicar un comentario