cómo hacer que un div se mueva aleatoriamente alrededor de una página (usando jQuery o CSS)

He estado buscando en Google para encontrar una respuesta a esto, pero no he tenido suerte. Podría ser porque soy un poco aficionado y no conozco los términos adecuados para buscar, pero tal vez alguien aquí pueda dirigirme en la dirección correcta o ayudarme.

De todos modos, estoy buscando una forma de obtener un div aleatoriamente, mover suavemente alrededor de una página. Habrá un color de fondo, luego esta imagen que quiero aparentemente al azar, infinitamente mover alrededor de la página. Al igual que el fondo de la pantalla de inicio de un reproductor de DVD donde “DVD” simplemente flota.

El punto de partida del div no importa, ni el punto final. Solo tiene que moverse de forma aleatoria por la página mientras dure el usuario en esa página.

Tengo habilidades correctas de HTML y CSS, habilidades JS muy básicas y cierta experiencia en la implementación de jQuery. Idealmente, me gustaría algo que pueda implementar yo mismo.

¡¡¡Gracias por adelantado!!!

La premisa básica es generar valores posicionales y usar la función animada () de jquery para mover el div. El cálculo de la próxima posición es simple, solo necesitas un poco de matemática. Aquí hay un jsfiddle muy básico que acabo de joder. Podría funcionar posiblemente con un temporizador de retardo, una velocidad de cálculo dynamic basada en cuánto se movió demasiado, pero eso te da un punto de partida, espero.

http://jsfiddle.net/Xw29r/

Código de ejemplo actualizado con modificador de velocidad:

http://jsfiddle.net/Xw29r/15/

Prueba esto:

function moveDiv() { var $span = $("#random"); $span.fadeOut(1000, function() { var maxLeft = $(window).width() - $span.width(); var maxTop = $(window).height() - $span.height(); var leftPos = Math.floor(Math.random() * (maxLeft + 1)) var topPos = Math.floor(Math.random() * (maxTop + 1)) $span.css({ left: leftPos, top: topPos }).fadeIn(1000); }); }; moveDiv(); setInterval(moveDiv, 5000); 

Ejemplo de violín

bien, necesitarás capturar las dimensiones de la window

entonces necesitarás generate random numbers <= el height y el width de la screen (menos el width / height del box )

dale a la caja una posición absolute , y dale a la caja las coordinates x , y generadas

luego configure un temporizador para llamar a this function nuevamente.

🙂

 $(document).ready(function() { randoBox = { width:$("body").width(), height:$("body").height(), x:0, y:0, el:null, time:1000, state:"active", init: function(){ el = $(document.createElement('div')); el.attr("style","position:absolute;left:"+this.x+";top:"+this.y+";"); el.html("DVD") el.height(100); el.width(100); $("body").append(el); }, move:function(){ this.y = Math.random()*this.height+1; this.x = Math.random()*this.width+1; el.attr("style","position:absolute;left:"+this.x+";top:"+this.y+";"); }, run:function(state){ if (this.state == "active" || state){ this.move(); setTimeout(function(){this.run()},this.time); } } } randoBox.init(); randoBox.run(true); }); 

EDITAR Se agregó movimiento aleatorio, como la pantalla inactiva de DVD, pero puede rebotar en cualquier lugar.

http://jsfiddle.net/ryXBM/2/

 dirR = "+=2"; dirL = "+=2"; function moveDir() { if (Math.random() > 0.95) { swapDirL(); } if (Math.random() < 0.05) { swapDirR(); } } function swapDirL() { dirL == "+=2" ? dirL = "-=2" : dirL = "+=2"; } function swapDirR() { dirR == "+=2" ? dirR = "-=2" : dirR = "+=2"; } setInterval (function() { $("#d").css("left", dirL); $("#d").css("top", dirR); moveDir(); } , 50)​ 

CSS

 #d { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: #fce; }​ 

Puede usar jQuery Slide y Math.random () , generando un número aleatorio para usar como la distancia para moverse y otro número aleatorio para basar su decisión sobre la dirección en la que desea moverse.

Deberá especificar los bordes de la animación: ¿cuáles son los valores máximos para los atributos top e left ? Después de eso, todo lo que necesita es .animate() función .animate() una y otra vez …

Algo como esto debería funcionar –

 var maxLeft = _left_border - $('#selectedElement').width(); // counter intuitively this is actually the right border var maxTop = _top_border - $('#selectedElement').height(); var animationDurration = _duration; function randomAnimation(){ var randomLeft = Math.floor(Math.random()*maxLeft); var randomTop = Math.floor(Math.random()*maxTop); $('#selectedElement').animate({ left: randomLeft, top: randomTop }, animationDurration, function() { randomAnimation(); }); } 
        
button