it-swarm.com.de

zufällige Position von Divs in Javascript

Ich versuche, Divs irgendwo auf einer Webseite mit Javascript zufällig erscheinen zu lassen. Ein Div erscheint dann, verschwindet, dann erscheint ein anderes Div an anderer Stelle auf der Seite, verschwindet dann, ein anderes Div erscheint wieder an einer anderen zufälligen Stelle auf der Seite, verschwindet dann usw. Ich bin nicht sicher, wie man zufällige Einheiten in Pixeln erzeugt oder welche Technik zum Erzeugen von zufälligen Positionen verwendet wird.

Wie mache ich das? Hier ist mein 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);
11
Shaoz

Hier ist eine Möglichkeit, dies zu tun. Ich variiere zufällig die Größe des div innerhalb eines festen Bereichs und setze dann die Position so, dass das Objekt immer innerhalb der aktuellen Fenstergrenzen platziert wird.

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

Bearbeiten: Zum Spaß eine zufällige Farbe hinzugefügt.

Edit: .remove() hinzugefügt, damit die Seite nicht mit alten divs verschmutzt wird.

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

28
Ken Redler

Nehmen wir an, Sie haben dieses HTML:

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

Und dieses CSS:

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

Wenn Sie mit jQuery dieses Skript verwenden, wird sich jedes Mal, wenn Sie auf das div klicken, es zufällig im Dokument positionieren:

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

Dies funktioniert folgendermaßen: Zuerst berechnen Sie die Breite und Höhe von document, dann berechnen Sie die Breite und Höhe von div, und dann subtrahieren Sie die Breite von div von der Breite von document und die Höhe von div von der Höhe von document und berücksichtigen das Pixel Bereich, in dem Sie die Variable div eingeben möchten (damit sie nicht aus dem Dokument herausfließt). Wenn Sie Auffüllung und Umrandung in der Variablen div haben, müssen Sie auch diese Werte berücksichtigen. Wenn Sie den Bereich herausgefunden haben, können Sie ihn einfach mit Math.random() multiplizieren und die zufällige Position Ihrer div finden.

Also noch einmal: Suchen Sie zuerst die Abmessungen des Containers, dann die Abmessungen Ihres Elements, subtrahieren Sie dann die Elementabmessungen von den Containerdimensionen und verwenden Sie dann Math.random() für diesen Wert.

Die Grundidee ist hier zusammengefasst:

http://jsfiddle.net/5mvKE/

4
treeface

Ich habe einen existierenden Code für diese Website geändert. Sie können ihn auf tweefox.nc sehen

<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

Einige Bugs:

  1. Sie haben es versäumt, das Div absolut zu positionieren. Sonst wird es nicht funktionieren.
  2. Ich denke, Sie müssen 'px' zu den Zahlen hinzufügen.
  3. Die Karte besteht aus Strings 

Genau in Ihrem jQuery-CSS-Setup:

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