Animaciones con Jquery 2

viernes, 1 de junio de 2012

Animaciones con Jquery 2

Animaciones con Jquery 2

En la siguiente animación se podrá dibujar en el div, bastará con presionar el mouse para hacer un sencillo dibujo y soltar el mouse para dejar de dibujar.

* 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.

Prueba a dibujar algo en la siguiente caja...

El código del ejemplo es el siguiente...

<html>
<head>

<!--Visiten www.mercado-anuncios.es-->
<!--BY MANU DÁVILA-->
<!--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() {

$('#caja').attr('unselectable', 'on');
$('#caja').css('MozUserSelect', 'none');//mozilla y derivados
$('#caja').css('KhtmlUserSelect', 'none');//el safari por ejemplo

x=0;

$("#caja").bind("mouseover", function() {


$("#caja").bind("mousedown", function(){
$("#caja").bind("mousemove", function(e){
$("#caja").append("<b class='"+x+"' >.</b>");
$("."+x).css({position: "absolute"});
$("."+x).css({top: e.pageY-115, left: e.pageX-25});
x=x+1;
$("#puntos").html("Total de puntos: " + x);


});
});


$("#caja").bind("mouseup", function(){
$("#caja").unbind("mousemove");
});

});

});


</script>


</head>


<body>

<div id="caja" style="
position: relative; 
font-size: 100px; width: 
250px; height: 250px; 
background-color: white; 
overflow:hidden; 
cursor:pointer;
border-color: black;
border-width: 5px;
border-style: solid;
"></div>
<div id="puntos" style="font-size: 50px; color: black;"></div>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>

</body>

</html>

No hay comentarios:

Publicar un comentario

jQuery Manual

viernes, 1 de junio de 2012

Animaciones con Jquery 2

No hay comentarios:

Tutoriales:

Entradas populares