Descarga contenido exclusivo en
Ofimática y Programación + Tecnología

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, p... thumbnail 1 summary



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 en la entrada