comment obtenir une div au hasard déplacer sur une page (à l'aide de jQuery ou CSS)

Le principe de base est de générer des valeurs de position, et l'utilisation de jquery animate() de la fonction pour déplacer la div. Le calcul de la position suivante est simple, vous avez juste besoin d'un peu de maths. Voici un très de base jsfiddle je viens juste d'en haut. Il pourrait le faire avec, éventuellement, un retardateur, dynamique, calcul de la vitesse en fonction de la mesure de son eu trop le déplacer vers.c.t. Mais il vous donne un point de départ, je l'espère.

http://jsfiddle.net/Xw29r/

Mise à jour du code d'exemple avec la vitesse modificateur:

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

---

Pour quelque raison que ce soit toujours obtenir un peu d'attention, voici donc une mise à jour de la réponse qui utilise les transitions CSS qui devrait être beaucoup plus lisse.

http://jsfiddle.net/wry4d9Lt/1/

JS:

function RandomObjectMover(obj, container) {
this.$object = obj;
this.$container = container;
this.pixels_per_second = 250;
this.current_position = { x: 0, y: 0 };
this.is_running = false;
}
//Set the speed of movement in Pixels per Second.
RandomObjectMover.prototype.setSpeed = function(pxPerSec) {
this.pixels_per_second = pxPerSec;
}
RandomObjectMover.prototype._generateNewPosition = function() {
//Get container dimensions minus div size
var availableHeight = this.$container.innerHeight - this.$object.clientHeight;
var availableWidth = this.$container.innerWidth - this.$object.clientHeight;
//Pick a random place in the space
var y = Math.floor(Math.random() * availableHeight);
var x = Math.floor(Math.random() * availableWidth);
return { x: x, y: y };    
}
RandomObjectMover.prototype._calcDelta = function(a, b) {
var dx   = a.x - b.x;         
var dy   = a.y - b.y;         
var dist = Math.sqrt( dx*dx + dy*dy ); 
return dist;
}
RandomObjectMover.prototype._moveOnce = function() {
//Pick a new spot on the page
var next = this._generateNewPosition();
//How far do we have to move?
var delta = this._calcDelta(this.current_position, next);
//Speed of this transition, rounded to 2DP
var speed = Math.round((delta / this.pixels_per_second) * 100) / 100;
//console.log(this.current_position, next, delta, speed);
this.$object.style.transition='transform '+speed+'s linear';
this.$object.style.transform='translate3d('+next.x+'px, '+next.y+'px, 0)';
//Save this new position ready for the next call.
this.current_position = next;
};
RandomObjectMover.prototype.start = function() {
if (this.is_running) {
return;
}
//Make sure our object has the right css set
this.$object.willChange = 'transform';
this.$object.pointerEvents = 'auto';
this.boundEvent = this._moveOnce.bind(this)
//Bind callback to keep things moving
this.$object.addEventListener('transitionend', this.boundEvent);
//Start it moving
this._moveOnce();
this.is_running = true;
}
RandomObjectMover.prototype.stop = function() {
if (!this.is_running) {
return;
}
this.$object.removeEventListener('transitionend', this.boundEvent);
this.is_running = false;
}
//Init it
var x = new RandomObjectMover(document.getElementById('a'), window);
//Toolbar stuff
document.getElementById('start').addEventListener('click', function(){
x.start();
});
document.getElementById('stop').addEventListener('click', function(){
x.stop();
});
document.getElementById('speed').addEventListener('keyup', function(){
if (parseInt(this.value) > 3000 ) {
alert('Don\'t be stupid, stupid');
this.value = 250;
}
x.setSpeed(parseInt(this.value));
});
//Start it off
x.start();

CSS:

div#toolbar {
position:fixed;
background:#20262F;
width:100%;
text-align:center;
padding: 10px
}
div#a {
width: 50px;
height:50px;
background-color:red;
position:absolute;
}

HTML:

<div id="toolbar">
<button id="start">Start</button>
<button id="stop">Stop</button>
<input type="number" value="250" id="speed" />
</div>
<div id='a'></div>

bien que vous aurez besoin pour capturer les dimensions de la window

ensuite, vous aurez besoin de generate random numbers <= la height et width de la screen (moins le width/height de la box)

donner à la zone un absolute position, et de donner à la boîte ont généré x,y coordinates

ensuite régler une minuterie pour appeler this function de 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);
});

Vous pouvez utiliser jQuery Slide et Les mathématiques.random(), générant un nombre aléatoire à utiliser comme la distance de mouvement et un autre nombre aléatoire de la base de votre décision sur la direction à suivre.

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