Animaciones con Jquery 1

viernes, 1 de junio de 2012

Animaciones con Jquery 1

Animaciones con Jquery 1

Esta animación consiste en una Caja, la cual al pasar el mouse sobre ella (mouseover) puede aceptar un nuevo evento, que consiste en agregar nuevos elementos al div en la posición marcada por el mouse, para ello se utilizan los métodos pageX y pageY que obtiene la posición del mouse.

* Para que el ejemplo funcione la resolución deber de ser de 1280 píxeles de ancho, ya que si varía el screen de la pantalla variará la posición exacta del puntero.

Para verlo más claro tienes que hacer click dentro de la caja, también prueba a hacerlo fuera de ella...

Animación 1

El código es el siguiente...

<html>
<head>

<!--Visiten www.mercado-anuncios.es-->
<!--EFECTOS y ANIMACIONES JQUERY-->

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>


<script type="text/javascript">

$(document).ready(function() {
x=0;
$("#caja").mouseover(function() {
$("#caja").bind("mousedown", function(e){
$("#caja").append("<b class='"+x+"'>?</b>");
$("."+x).css({position: "absolute"});
$("."+x).animate({top: e.pageY-70, left: e.pageX-25}, 500);
x=x+1;
});
});
});
</script>
</head>


<body>

<input type="button" id="boton" value="RESOLUCIÓN DE PANTALLA">
<div id="caja" style="
position: absolute; 
font-size: 40px; width: 
250px; height: 250px; 
background-color: white; 
overflow:hidden; 
cursor:pointer;
border-color: black;
border-width: 5px;
border-style: solid;
"></div>

</body>

</html>

No hay comentarios:

Publicar un comentario

jQuery Manual

viernes, 1 de junio de 2012

Animaciones con Jquery 1

No hay comentarios:

Tutoriales:

Entradas populares