cómo obtener un div para mover aleatoriamente una página (usando jQuery o CSS)

Question

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 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 inicial 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 de antemano!

Answer 1

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 hacer posiblemente con un temporizador de retardo, una velocidad de cálculo dinámico basada en cuán lejos se movió e.c.t. Pero te da un punto de partida, espero.

http://jsfiddle.net/Xw29r/

Actualizado código de ejemplo, con modificador de velocidad:

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

Answer 2

Usted podría utilizar jQuery Slide y Math.random(), generando un número aleatorio a usar como la distancia a mover y otro número aleatorio para basar su decisión sobre qué dirección para moverse.

Answer 3

así que necesita para capturar las dimensiones del window

entonces tendrá que generate random numbers<= la height y width del screen (menos el width/height del box)

dar el cuadro de una posición absolute, y dar a la caja de haber generado el x, ycoordinates

entonces establecer un temporizador para llamar this function de nuevo.

:)

$(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); 
}); 

Answer 4

Usted desea especificar las fronteras de la animación - lo que son los valores máximos para los topleft y atributos ... Después de que todo lo que necesita es la función de .animate() ser llamado 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(); 
    }); 
} 

Answer 5

EDITAR Movimiento aleatorio agregado, 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; 
}​ 

Answer 6

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); 

Example fiddle

Answer 7

<html> 
    <head> 
     <link rel="stylesheet" href="sample1.css"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
        $('.btn').mouseover(function(){ 
         $(this).css({ 
          left:(Math.random()*$(window).width()-20), 
          top:(Math.random()*$(window).height()-20),  
         }); 
        });    
      }); 
     </script> 
    </head> 
    <body> 
     <div class="btn" style="position: absolute">button</div> 
    </body> 
</html>