web-dev-qa-db-fra.com

comment faire en sorte qu'une div se déplace de manière aléatoire sur une page (en utilisant jQuery ou CSS)

J'ai fait quelques recherches sur Google pour trouver une réponse à cette question, mais je n'ai pas eu de chance. C'est peut-être parce que je suis un amateur et que je ne connais pas les termes appropriés, mais peut-être que quelqu'un ici peut me guider dans la bonne direction ou m'aider.

Quoi qu’il en soit, je cherche un moyen d’amener une div à se déplacer de manière aléatoire et en douceur sur une page. Il y aura une couleur d'arrière-plan, puis cette image que je souhaite apparemment déplacer au hasard, à l'infini, sur la page. Cela ressemble beaucoup à l'arrière-plan de l'écran d'accueil d'un lecteur de DVD où "DVD" flotte juste. 

Le point de départ de la div importe peu, pas plus que le point final. Il suffit de déplacer la page de manière aléatoire pour la durée pendant laquelle un utilisateur est sur cette page.

J'ai des compétences décentes en HTML et CSS, des compétences de base en JS et une certaine expérience de la mise en oeuvre de jQuery. Idéalement, j'aimerais quelque chose que je puisse mettre en œuvre moi-même.

Merci d'avance!!!

jquerycssanimation
19
Ephraim

Le principe de base est de générer des valeurs de position et d'utiliser la fonction animate () de jquery pour déplacer le div. Le calcul de la position suivante est simple, vous avez juste besoin d'un peu de calcul. Voici un Jsfiddle très basique que je viens de faire tomber. Cela pourrait se faire avec éventuellement un temporisateur, une vitesse de calcul dynamique basée sur la distance parcourue. Mais cela vous donne un point de départ j'espère.

http://jsfiddle.net/Xw29r/

Exemple de code mis à jour avec modificateur de vitesse:

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

38
Lee

Essaye ça:

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

Exemple de violon

6
Rory McCrossan

vous aurez besoin de saisir les dimensions de la window

alors vous aurez besoin de generate random numbers<= le height et width du screen (moins le width/height du box)

attribuez à la boîte une position absolute et donnez à la boîte le x, ycoordinates généré

puis configurez une minuterie pour appeler this function à nouveau.

:)

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

EDIT Ajout d'un mouvement aléatoire, comme un écran de veille de DVD mais pouvant rebondir n'importe où.

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;   
}​
1
Heitor Chang
<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>
0
Rupa Das

Vous pouvez utiliser jQuery Slide et Math.random () , en générant un nombre aléatoire à utiliser comme distance à déplacer et un autre nombre aléatoire pour fonder votre décision. 

0
Mitch Satchwell

Vous voudrez spécifier les limites de l'animation - quelles sont les valeurs maximales pour les attributs top et left ... Après cela, tout ce dont vous avez besoin est la fonction .animate() pour être appelée à plusieurs reprises ...

Quelque chose comme ça devrait marcher - 

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