nealgrosskopf.com publicó un tutorial (en inglés) que explica paso a paso cómo crear un efecto de iconos que rebotan con jQuery y CSS. Utilizando este efecto podemos crear vistosos menúes al estilo de por ejemplo, el dock del escritorio de Leopard OS.
Implementación
Primero enlazamos las bibliotecas:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
Luego agregamos la CSS:
<style type="text/css">
html { position: relative; padding-top: 50px; }
#demobar
{
background: #b8a898;
background: #b8a898
-moz-linear-gradient(top, #b8a898 0%, #9d8771 100%) repeat-x;
background: #b8a898
-webkit-gradient(linear, 0 0, 0 46, color-stop(0.0, #b8a898),
color-stop(1.0, #9d8771)) repeat-x;
border-bottom: 2px solid #000;
padding: 5px 2px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
z-index: 100;
_display: none;
*display: none;
}
#demobar span
{
background: #a3af7c;
background: #a3af7c
-moz-linear-gradient(top, #a3af7c 0%, #748950 100%)
repeat-x;
background: #a3af7c
-webkit-gradient(linear, 0 0, 0 40, color-stop(0.0, #a3af7c),
color-stop(1.0, #748950)) repeat-x;
border: 1px solid #777;
border-radius: 7px;
-o-border-radius: 7px;
-icab-border-radius: 7px;
-khtml-border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
color: #fafafa;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
line-height: 36px;
margin: 5px;
padding: 10px;
text-shadow: -1px -1px 1px #777;
width: 100px;
}
#demobar span:hover
{
border: 1px solid #666;
color: #fff;
text-shadow: -1px -1px 3px #444;
}
#demobar img
{
cursor: pointer;
float: right;
margin: 3px 15px 0px 0px;
}
</style>
También agregamos el código CSS de la barra de iconos:
<style type="text/css">
#icons
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}
#icons li
{
float: left;
height: 100px;
padding: 10px 0px 0px 0px;
}
#icons li img
{
display: block;
border: 0px;
}
</style>
El script con el que le damos vida a esta implementación es muy sencillo:
<script type="text/javascript">var opacity = true;</script>
<!--[if IE]><script type="text/javascript">
var opacity = false;</script><![endif]-->
<script type="text/javascript">
$(document).ready(function(){
$("#icons img").hover(function(){
if(opacity)
{
$(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
} else {
$(this).stop().animate({marginTop: -10}, 400);
}
},function(){
if(opacity)
{
$(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
} else {
$(this).stop().animate({marginTop: 0}, 400);
}
});
});
</script>
Y por último agregamos la estructura HTML con la que mostramos la barra de iconos:
<ul id="icons"> <li><a href=""><img src="images/Firefox.png" alt="Firefox"></a></li> <li><a href=""><img src="images/Chrome.png" alt="Chrome"></a></li> <li><a href=""><img src="images/Opera.png" alt="Opera"></a></li> <li><a href=""><img src="images/Safari.png" alt="Safari"></a></li> <li><a href=""><img src="images/IE.png" alt="Internet Exploder"></a></li> </ul>
