Código de JQuery - Mover un recuadro aleatoriamente al pasar el ratón por encima con jquery

Imágen de perfil

Mover un recuadro aleatoriamente al pasar el ratón por encima con jquerygráfica de visualizaciones


JQuery

Publicado el 23 de Febrero del 2016 por xve
905 visualizaciones desde el 23 de Febrero del 2016. Una media de 28 por semana
Este simple código lo que hace es que mueve un recuadro por la pantalla de forma aleatoria cada vez que el ratón pasa por encima del mismo.

Versión 1.0

Actualizado el 24 de Febrero del 2016 (Creado el 23 de Febrero del 2016)gráfica de visualizaciones de la versión: Versión 1.0
906 visualizaciones desde el 23 de Febrero del 2016. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="//code.jquery.com/jquery-2.2.0.min.js"></script>
	<style>
		#elemento {position:absolute;width:100px;height:100px;background-color:#ccc;}
	</style>
 
	<script>
		// Función que devuelve un numero aleatorio entre el min y el max indicado
		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min)) + min;
		}
 
		$(document).ready(function(){
			$("#elemento").hover(function(){
 
				// obtenemos el valor vertical aleatorio
				// entre 1 y la altura de la pantalla menos los 100 px del elemento
				var v=getRandomInt(1,$(window).height()-100);
 
				// obtenemos el valor horizontal aleatorio
				// entre 1 y la anchura de la pantalla menos los 100 px del elemento
				var h=getRandomInt(1,$(window).width()-100);
 
				// movemos el elemento a la nueva posición
				$(this).css({top: v+"px", left: h+"px"});
			});
		});
	</script>
</head>
 
<body>
	<div id="elemento"></div>
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3443