come ottenere un div per spostarsi casualmente su una pagina (usando jQuery o CSS)

Question

Ho fatto qualche ricerca su Google per trovare una risposta a questo, ma non ho avuto fortuna. Potrebbe essere perché sono un po 'un dilettante e non conosco i termini corretti da cercare, ma forse qualcuno qui può guidarmi nella giusta direzione o aiutarmi.

In ogni caso, sto cercando un modo per ottenere un div a caso, spostarsi senza problemi su una pagina. Ci sarà un colore di sfondo, quindi questa immagine che voglio apparentemente a caso, si muove all'infinito intorno alla pagina. Molto simile allo sfondo della schermata iniziale di un lettore DVD in cui "DVD" è semplicemente fluttuante.

Il punto di partenza del div non ha importanza, né il punto finale. Ha solo bisogno di spostarsi a caso nella pagina per la durata in cui un utente si trova su quella pagina.

Ho competenze HTML e CSS decenti, competenze JS di base e esperienza nell'implementazione di jQuery. Idealmente, mi piacerebbe qualcosa che posso implementare da solo.

Grazie in anticipo !!!

Answer 1

La premessa di base è di generare valori posizionali e usare la funzione animate() di jquery per spostare il div. Il calcolo della prossima posizione è semplice, hai solo bisogno di un po 'di matematica. Ecco un jsfiddle molto semplice che ho appena fatto. Potrebbe fare con un eventuale timer di ritardo, una velocità che calcola dinamicamente in base a quanto lontano è troppo mosso e.c.t. Ma ti dà un punto di partenza, spero.

http://jsfiddle.net/Xw29r/

codice di esempio Aggiornato con modificatore di velocità:

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

Answer 2

Si potrebbe utilizzare jQuery Slide e Math.random(), generando un numero casuale da utilizzare come la distanza di circolare e di un altro numero casuale per basare la vostra decisione su quale direzione muoversi in.

Answer 3

bene è necessario acquisire le dimensioni del window

allora avrete bisogno di generate random numbers<= il height e width del screen (meno la width/height del box)

invia il testo posizione absolute, e invia il testo hanno generato x, ycoordinates

quindi impostare un timer per chiamare this function nuovamente.

:)

$(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

Ti consigliamo di indicare i confini dell'animazione - che cosa sono i valori massimi per gli attributi top e left ... Dopo che tutto ciò che serve è la funzione .animate() a essere chiamato ancora e ancora ...

Qualcosa del genere dovrebbe funzionare -

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

EDIT Aggiunto movimento casuale, come lo schermo di inattività DVD ma può rimbalzare ovunque.

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

Prova questo:

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>