web-dev-qa-db-fra.com

position aléatoire des divs en javascript

J'essaie de faire en sorte que Divs apparaisse au hasard n'importe où sur une page Web avec du javascript. Ainsi, une div apparaît, puis disparaît, puis une autre div apparaît quelque part sur la page, puis disparaît, puis une autre div apparaît à nouveau à un autre endroit aléatoire de la page, puis disparaît, etc. Je ne suis pas sûr de savoir comment générer des unités aléatoires en pixels ni quelle technique utiliser pour générer des positions aléatoires.

Comment je fais ça? Voici mon code:

var currentDivPosition = myDiv.offset(),
    myDivWidth = myDiv.width(),
    myDivHeight = myDiv.height(),
            var myDiv = $('<div>'),
    finalDivPositionTop, finalDivPositionLeft;

myDiv.attr({ id: 'myDivId', class: 'myDivClass' }); // already defined with position: absolute is CSS file.

// Set new position     
finalDivPositionTop = currentDivPosition.top + Math.floor( Math.random() * 100 );
finalDivPositionLeft = currentDivPosition.left + Math.floor( Math.random() * 100 );

myDiv.css({ // Set div position
  top: finalDivPositionTop,
  left: finalDivPositionLeft
});

$('body').append(myDiv);

myDiv.text('My position is: ' + finalDivPositionTop + ', ' + finalDivPositionLeft); 

myDiv.fadeIn(500);

setTimeout(function(){

  myDiv.fadeOut(500);

  myDiv.remove();       

}, 3000);
javascriptjquerypositionpositioning
11
Shaoz

Voici une façon de le faire. Je fais varier aléatoirement la taille de la div dans une plage fixe, puis je règle la position de sorte que l'objet soit toujours placé dans les limites de la fenêtre en cours.

(function makeDiv(){
    // vary size for fun
    var divsize = ((Math.random()*100) + 50).toFixed();
    var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
    $newdiv = $('<div/>').css({
        'width':divsize+'px',
        'height':divsize+'px',
        'background-color': color
    });

    // make position sensitive to size and document's width
    var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
    var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

    $newdiv.css({
        'position':'absolute',
        'left':posx+'px',
        'top':posy+'px',
        'display':'none'
    }).appendTo( 'body' ).fadeIn(100).delay(1000).fadeOut(500, function(){
      $(this).remove();
      makeDiv(); 
    }); 
})();

Edit: Pour le plaisir, ajouté une couleur aléatoire.

Edit: Ajout de .remove() pour ne pas polluer la page avec les anciens divs.

Exemple: http://jsfiddle.net/redler/QcUPk/8/

28
Ken Redler

Disons que vous avez ce code HTML:

<div id="test">test div</div>

Et ce CSS:

#test {
    position:absolute;
    width:100px;
    height:70px;
    background-color:#d2fcd9;
}

Avec jQuery, si vous utilisez ce script, chaque fois que vous cliquerez sur la div, il se positionnera de manière aléatoire dans le document:

$('#test').click(function() {
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;

    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax )
    });
});

Voici comment cela fonctionne: vous calculez d’abord la largeur et la hauteur document, vous calculez ensuite la largeur et la hauteur div, puis vous soustrayez la largeur div de la largeur document et la hauteur div de la hauteur document et considérons que le pixel vous êtes prêt à mettre la div dans (afin qu’elle ne déborde pas du document). Si vous avez un remplissage et une bordure dans la variable div, vous devrez également prendre en compte ces valeurs. Une fois que vous avez déterminé la plage, vous pouvez facilement le multiplier par Math.random() et trouver la position aléatoire de votre div.

Donc encore une fois: trouvez d'abord les dimensions du conteneur, puis les dimensions de votre élément, puis soustrayez les dimensions de l'élément des dimensions du conteneur, et ensuite utilisez Math.random() sur cette valeur.

L'idée de base est résumée ici:

http://jsfiddle.net/5mvKE/

4
treeface

J'ai changé un code existant par celui-ci pour notre site Web, vous pouvez le voir sur tweefox.nc

<script>
            function draw() {
                $(canvas).attr('width', WIDTH).attr('height',HEIGHT);
                con.clearRect(0,0,WIDTH,HEIGHT);
                for(var i = 0; i < pxs.length; i++) {
                    pxs[i].fade();
                    pxs[i].move();
                    pxs[i].draw();
                }
            }

            function Circle() {
                this.s = {ttl:8000, xmax:10, ymax:4, rmax:10, rt:1, xdef:950, ydef:425, xdrift:4, ydrift: 4, random:true, blink:true};

                this.reset = function() {
                    this.x = (this.s.random ? WIDTH*Math.random() : this.s.xdef);
                    this.y = (this.s.random ? HEIGHT*Math.random() : this.s.ydef);
                    this.r = ((this.s.rmax-1)*Math.random()) + 1;
                    this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
                    this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
                    this.hl = (this.s.ttl/rint)*(this.r/this.s.rmax);
                    this.rt = Math.random()*this.hl;
                    this.s.rt = Math.random()+1;
                    this.stop = Math.random()*.2+.4;
                    this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
                    this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1);
                }

                this.fade = function() {
                    this.rt += this.s.rt;
                }

                this.draw = function() {
                    if(this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) {
                        this.s.rt = this.s.rt*-1;
                        this.dx = (Math.random()*this.s.xmax) * (Math.random() < .5 ? -1 : 1);
                        this.dy = (Math.random()*this.s.ymax) * (Math.random() < .5 ? -1 : 1);
                    } else if(this.rt >= this.hl) this.reset();
                    var newo = 1-(this.rt/this.hl);
                    con.beginPath();
                    con.arc(this.x,this.y,this.r,0,Math.PI*2,true);
                    con.closePath();
                    var cr = this.r*newo;
                    g = con.createRadialGradient(this.x,this.y,0,this.x,this.y,(cr <= 0 ? 1 : cr));
                    g.addColorStop(0.0, 'rgba(255,255,255,'+newo+')');
                    g.addColorStop(this.stop, 'rgba(255,255,255,'+(newo*.2)+')');
                    g.addColorStop(1.0, 'rgba(255,255,255,0)');
                    con.fillStyle = g;
                    con.fill();
                }

                this.move = function() {
                    this.x += (this.rt/this.hl)*this.dx;
                    this.y += (this.rt/this.hl)*this.dy;
                    if(this.x > WIDTH || this.x < 0) this.dx *= -1;
                    if(this.y > HEIGHT || this.y < 0) this.dy *= -1;
                }

                this.getX = function() { return this.x; }
                this.getY = function() { return this.y; }
            }
            $(document).ready(function(){
//              if( /Android|AppleWebKit|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
//              } else {
                    if(document.getElementById('pixie')) {
                        WIDTH = $(window).width();
                        HEIGHT = $(window).height();    
                        canvas = document.getElementById('pixie');
                        $(canvas).attr('width', WIDTH).attr('height',HEIGHT);
                        con = canvas.getContext('2d');
                        pxs = new Array();
                        rint = 60;
                        for(var i = 0; i < 50; i++) {
                        pxs[i] = new Circle();
                        pxs[i].reset();
                        }
                        setInterval(draw,rint);
                    }
//              }
            });
        </script>
0
AngeCorse

Quelques bugs:

  1. Vous avez manqué de positionner la div absolument. Sinon, cela ne fonctionnera pas.
  2. Je pense que vous devez ajouter «px» aux chiffres.
  3. La carte est faite de ficelles 

Dans votre configuration css jQuery:

myDiv.css({
    'position' : 'absolute',
    'top' : finalDivPositionTop + 'px',
    'left' : finalDivPositionLeft + 'px'
});
0
sidyll