Aplicaciones: 1. Un Menú Desplazado

Aplicaciones
1. Un men desplazado
Al pasar el ratn por encima de un tem del men de navegacin, ste se va a desplazar a la derecha.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
#nav ul { list-style: none;
padding: 0px;
margin: 0px;}
#nav li a { display: block;
height: 25px;
line-height: 25px;
width: 120px;
background: #99ccff;
border: 1px solid navy;
color: black;
text-decoration: none;
text-align: center;}
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
<li><a href="#">Men tem 1</a></li>
</ul>
</div>
</body>
</html>
El script jQuery se presenta de la siguiente manera:
<script>
$(document).ready(function() {
$(ul#menu li a).hover(function() {
$(this).stop().animate( { paddingLeft:"50px" }, 400 );
},
function() {
$(this).stop().animate( { paddingLeft:"0" }, 200 )
})
});
</script>
Explicaciones.
El mtodo hover()se ha asociado a los elementos de la lista que forman el men de navegacin.
},
Al pasar el ratn por encima de cada tem, el script detiene cualquier animacin que se est
desarrollando (stop()). Despus, aplica una anima-cin (animate()), que consiste en aumentar la
distancia con respecto al borde izquierdo (paddingLeft:"50px").
})
Cuando el cursor sale del tem, la segunda parte del mtodo hover()hace que el tem regrese a su
posicin inicial.
});
Fin del ready y del script.
El documento final es el siguiente:
<!doctype html>
<html lang="es">
<head>
<title>jQuery</title>
<script src="jquery.js"></script>
<script>
},
function() {
})
});
</script>
<style>
#nav ul { list-style: none;
padding: 0px;
margin: 0px;}
#nav li a { display: block;
height: 25px;
line-height: 25px;
width: 120px;
background: #99ccff;
border: 1px solid navy;
color: black;
text-decoration: none;
text-align: center;}
</style>
</head>
<body>
<div id="nav">
<ul id="menu">
</ul>
</div>
</body>
</html>
2. Zoom en una vieta

Vamos a disear un script que permita mostrar una imagen en tamao real al pasar el ratn por
encima de una vieta de sta.
La transcripcin en papel no permite percibir la parte dinmica del script. Vaya al espacio de descarga
para disfrutarlo completamente.
El archivo Html inicial:
<!doctype html>
<html lang="es">
<head>
<title>Zoom</title>
<style>
body { padding: 3px;
margin: 0px;}
.container { position: absolute;
top: 50px;
left: 10px;}
ul.thumb { padding: 0px;
list-style-type: none;
margin: 0px;
width: 260px;
float: left;}
ul.thumb li { position: relative;
padding: 0px;
margin: 0px;
width: 100px;
height: 100px;
float: left;}
ul.thumb li img { position: absolute;
padding: 0px;
width: 90px;
height: 60px;
left: 0px;
border: none;}
</style>
</head>
<body>
<p>Pase por encima de la vieta para hacer la imagen ms grande.</p>
<div class="container">
<ul class="thumb">
<li><img alt="" src="iceberg1.jpg"></li>
</ul>
</div>
</body>
</html>
El script jQuery:
<script>
$(document).ready(function(){
$("ul.thumb li").hover(function() {
$(this).css({z-index: 10});
$(this).find(img).addClass("hover").stop()
.animate({ marginTop: -90px,
marginLeft: -50px,
top: 50%,
left: 50%,
width: 225px,
height: 150px,
}, 200);
},
function() {
$(this).find(img).removeClass("hover").stop()
.animate({ marginTop: 0,
marginLeft: 0,
top: 0,
left: 0,
width: 90px,
height: 60px,
}, 400);
});
});
</script>
Este script necesita algunas aclaraciones:
Aplicacin de un hover()en la vieta.
marginLeft: -50px,
top: 50%,
left: 50%,
width: 225px,
height: 150px,
}, 200);
},
Al pasar el ratn por encima de la vieta, se modifica la propiedad de estilo z-index (css({zindex: 10})) para que la imagen pase al frente. Despus una animacin (animate()) modifica
una serie de parmetros.
function() {
marginLeft: 0,
top: 0,
left: 0,
width: 90px,
height: 60px,
}, 400);
});
Cuando el cursor sale de la imagen, la propiedad de estilo z-indexse restablece a su estado inicial,
lo que provoca, a su vez, una animacin (animate()) en una serie de parmetros.
});
Fin del script.
El archivo final es el siguiente:
<!doctype html>
<html lang="es">
<head>
<title>Zoom</title>
<style>
body { padding: 3px;
margin: 0px;}
.container { position: absolute;
top: 50px;
left: 10px;}
ul.thumb { padding: 0px;
list-style-type: none;
margin: 0px;
width: 260px;
float: left;}
ul.thumb li { position: relative;
padding: 0px;
margin: 0px;
width: 100px;
height: 100px;
float: left;}
ul.thumb li img { position: absolute;
padding: 0px;
width: 90px;
height: 60px;
left: 0px;
border: none;}
</style>
<script src="jquery.js"></script>
<script>
$(this).find(img).addClass("hover").stop()
marginLeft: -50px,
top: 50%,
left: 50%,
width: 225px,
height: 150px,
}, 200);
},
function() {
marginLeft: 0,
top: 0,
left: 0,
width: 90px,
height: 60px,
}, 400);
});
});
</script>
</head>
<body>
<p>Pase por encima de la vieta para hacer la imagen ms grande.</p>

<div class="container">
<ul class="thumb">
</ul>
</div>
</body>
</html>

Aplicaciones: 1. Un Menú Desplazado

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aplicaciones: 1. Un Menú Desplazado

Uploaded by

Copyright:

Available Formats

Aplicaciones

2. Zoom en una vieta

El archivo Html inicial:

<p>Pase por encima de la vieta para hacer la imagen ms grande.</p>

You might also like