• Publicidad
  • Contacto
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
No Result
View All Result
Pixelco Tech Blog
  • Noticias
  • Video
  • Tecnología
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
No Result
View All Result
Pixelco Tech Blog
No Result
View All Result

Caja de información animada con jQuery

Diego CambiasoporDiego Cambiaso
09/09/2009
enDesarrollo/programación, Diseño, Internet, Recursos
min. lectura2 min
0

jquery-animated-information-BoxEn varias oportunidades escribí sobre implementaciones con jQuery de pestañas y contenido animado. Esta vez les presento un tutorial de una caja de información animada, también haciendo uso de jQuery; se trata de jQuery Animated Information Box publicado por electrictoolbox.com.

Esta implementación consiste en unas pestañas o menú lateral que van mostrando contenido que desplaza suavemente al hacer clic o pasar el mouse sobre dichas pestañas.

Implementación

Para comenzar necesitamos escribir un código HTML que será la estructura principal de nuestra implementación:

EntradasRelacionados

La tecnología y los datos están manteniendo “fresca” a la industria

El Internet de las Cosas revoluciona al mundo

<div id="example-links">
 <a href="#">Example 1</a>
 <a href="#">Example 2</a>
 <a href="#">Example 3</a>
 <a href="#">Example 4</a>
 <a href="#">Example 5</a>
</div>
<div id="example-content-container">
 <div id="example-content">
 <div><b>Example content 1</b><br />Lorem ipsum dolor sit amet.</div>
 <div><b>Example content 2</b><br />Vestibulum erat wisi.</div>
 <div><b>Example content 3</b><br />Pellentesque habitant morbi.</div>
 <div><b>Example content 4</b><br />Proin pretium purus ac ligula.</div>
 <div><b>Example content 5</b><br />Ut nisi lacus, mollis id convallis.</div>
 </div>
</div>
<div style="clear:both"></div>

Los enlaces del primer DIV son el menú o las pestañas, los dos DIV ‘contenedores’ son la información que se muestra a seleccionar una opción del menú.

El código jQuery con el que implementamos las funcionalidad es el siguiente:

$('#example-links a').click(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
    return false;
});

En el ejemplo retorna un valor Falso para prevenir el clic sobre el enlace.

Una variación es que podemos hacer que funcione cuando se pasamos el puntero del mouse por encima:

$('#example-links a').hover(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
});

Por el último necesitamos el código CSS que le da el estilo:

#example-links {
    border: 1px solid #ccc;
    border-bottom: none;
    float: left;
    width: 200px;
}
#example-links a {
    border-bottom: 1px solid #ccc;
    display: block;
    font-size: 17px;
    height: 39px;
    line-height: 39px;
    padding-left: 10px;
}
#example-links a:focus {
    outline: 0;
}
#example-links a:hover {
    background-color: #ddd;
}
#example-content-container {
    border: 1px solid #ccc;
    border-left: none;
    height: 200px;
    overflow: hidden;
    width: 350px;
}
#example-content div {
    height: 200px;
    padding: 10px;
}

Como se ve en este ejemplo, es muy sencillo de implementar y adaptar, logrando muy fácilmente un vistoso y agradable efecto visual.

jQuery Animated Information Box

Sitio: www.electrictoolbox.com/jquery-animated-information-box

Tags: bilioteca jquerycontenido esplazable con jqueryCSSimplmentacion jqueryJavascriptjQueryjquery uiplugin jqueryRecursosSoftware libreTutoriales

Suscribirse para recibir las últimas actualizaciones de Pixelco.

Cancelar suscripción
Diego Cambiaso

Diego Cambiaso

Desarrollador de software egresado de la Universidad Católica de Argentina y fotógrafo. Blogger desde hace más de 13 años, creador de Pixelco Tech Blog. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

Microsoft Teams - Interface

Microsoft Teams disponible para usuarios de Office 365 en el mundo

20/03/2017
El tutorial ‘Minecraft’ Hora del Código tiene como objetivo introducir a millones de jóvenes a la creatividad de la informática

Tutorial de codificación Minecraft para los estudiantes y educadores

20/11/2015

Note Links: Conoce una función de Evernote para conectarte con los contenidos esenciales

18/01/2015
HEX: Shards of Fate - Open BEta

Hex: Shards Of Fate – Disponible en Open Beta

05/12/2014

Vivo Y50 Review

https://www.youtube.com/watch?v=H2urBEMmHJc&ts

The Sero

https://www.youtube.com/watch?v=Za5_Lbpr5aA

Lenovo Ideapad Gaming 3

https://www.youtube.com/watch?v=y6rJ0R3T-Eg

Ecosistema de Samsung

https://www.youtube.com/watch?v=vmPx0yT1XUk&t=6s

Familia Moto One Fusion

https://www.youtube.com/watch?v=J5eA3d6QEfk

Moto G9 Plus – Unboxing

https://www.youtube.com/watch?v=mzlufN7eSyI

Pixelco Tech Blog

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Sobre Pixelco

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Pixelco Tech Blog

  • Contacto
  • Pixelco
  • Pixelco entradas
  • Política de Privacidad
  • Publicidad
  • Sobre Pixelco
Pixelco Tech Blog - Desde 2006

© 2020 Pixelco Tech Blog - Internet & Tecnología - Por Diego Cambiaso.

  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2020 Pixelco Tech Blog - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.