Déplacement d'une image de manière aléatoire autour d'une page

J'ai créé trois .des images png de ballons à air chaud. Chaque sont de tailles différentes, de sorte qu'ils donnent à l'idée de "profondeur". Quel est le meilleur moyen pour code ces .png, de sorte qu'ils se déplacent et flottent autour de mon conteneur comme des ballons à air chaud?

J'ai essayé le code suivant à partir de la Follette site que j'ai adapté de la manière suivante:

$('#balloon1')
  .sprite({fps: 3, no_of_frames: 1})
  .spRandom({
      top: 70,
      left: 100,
      right: 200,
      bottom: 340,
      speed: 10000,
      pause: 3000
  });

J'ai mis ce code pour les deux autres ballons (#balloon1) et (#balloon2) et puis j'ai mis respectifs DIVs dans un DIV conteneur marqué "#ciel"

J'ai pensé mettre de la vitesse de 10000 ferait flotter autour d'un beaucoup plus lent.

Toutefois, il ne fonctionne pas du tout la façon dont je l'avais espéré. Tout d'abord, une fois le chargement de la page, tous les trois ballons (que j'ai placé à l'origine dans trois endroits distincts le long du conteneur) immédiatement à flotter à la même place, et ils ne semblent pas bouger de cet endroit par la suite.

Est-il plus facile et plus efficace d'obtenir mes trois ballon d'images pour se déplacer autour de mon conteneur au hasard et de façon réaliste?

Je vous remercie beaucoup si vous êtes en mesure de fournir de l'aide!

OriginalL'auteur James Barracca | 2012-12-09

9

Voici un existant [partiel] la solution à votre problème:

HTML:
```
<div id="container">
<div class='a'></div>
    <div class='b'></div>
    <div class='c'></div>
</div>
```
CSS:
```
div#container {height:500px;width:500px;}

div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;

}
div.b {
width: 50px;
height:50px;
 background-color:blue;
position:fixed;

}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;

}
```
JavaScript:
```
$(document).ready(function() {
    animateDiv($('.a'));
        animateDiv($('.b'));
        animateDiv($('.c'));

});

function makeNewPosition($container) {

    //Get viewport dimensions (remove the dimension of the div)
    var h = $container.height() - 50;
    var w = $container.width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh, nw];

}

function animateDiv($target) {
    var newq = makeNewPosition($target.parent());
    var oldq = $target.offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $target.animate({
        top: newq[0],
        left: newq[1]
    }, speed, function() {
        animateDiv($target);
    });

};

function calcSpeed(prev, next) {

    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);

    var greatest = x > y ? x : y;

    var speedModifier = 0.1;

    var speed = Math.ceil(greatest / speedModifier);

    return speed;

}
```
Live JSFiddle Démo

J'ai essayé ce type de démarche quand j'ai posé la même question hier, mais quand j'ai mis tout cela dans Dreamweaver et aperçu, rien ne s'anime. J'ai littéralement copié et collé tout cela dans l'éditeur d'en faire l'essai. Quand je l'ai vue sur JSFiddle, il ressemble à ce que je veux faire. Mais, comme je l'ai dit, quand je l'ai coller dans Dreamweaver et aperçu, rien ne s'anime. Ai-je besoin d'un certain type de version jQuery? Ai-je raté quelque chose?
Je vois, vous êtes la même personne qui a posé la dernière question - pourquoi n'avez-vous pas de mettre à jour votre question précédente? -- Quelle est la version de jQuery êtes-vous en cours d'exécution. Avoir le jsFiddle est la preuve du concept, donc il doit y avoir quelque chose de mal avec votre environnement.
Désolé, je suis nouveau sur ce site donc je suis désolé si je n'ai pas suivi le protocole. De toute façon, je suis en cours d'exécution jquery-1.8.0.js
J'ai testé cette baisse à jQuery 1.2 et il a bien fonctionné, donc nous avons besoin d'en savoir plus sur votre environnement. Avez-vous ouvert la console pour vérifier les erreurs avec le code fourni? Êtes-vous dont jQuery avant l'appel de ce script? Êtes-vous le chargement de jQuery asynchrone? Il ya tellement de nombreuses inconnues ici. Il devrait fonctionner.
Je l'ai accepté parce que techniquement, car il fonctionne sur jsFiddle, c'est une bonne solution. Mais nous allons voir sur mon environnement. Qu'entendez-vous par "suis-je y compris jQuery avant l'appel de ce script?" J'ai collé le script entre un <script type="text/javascript"> </script> balises.

OriginalL'auteur Zeb Rawnsley

Si quelqu'un est intéressé par un plugin jQuery (fork les mêmes fonctions)
Plus facile à appliquer sur plusieurs éléments dans la page.

HTML:

<div id="container">
   <div class='a rand'></div>
   <div class='b rand'></div>
   <div class='c rand'></div>
</div>

CSS:

div#container {height:500px;width:500px;}
div.a {
width: 50px;
height:50px;
 background-color:red;
position:fixed;
    top:100px;
    left:100px;
}
div.b {
width: 50px;
height:50px;
 background-color:blue;
position:fixed;
    top:10px;
    left:10px;
}
div.c {
width: 50px;
height:50px;
 background-color:green;
position:fixed;
    top:200px;
    left:100px;
}

plugin jQuery:

(function($) {
$.fn.randomizeBlocks = function() {
return this.each(function() {
animateDiv($(this));
});
};
function makeNewPosition($container) {
//Get viewport dimensions (remove the dimension of the div)
var h = $container.height() - 10;
var w = $container.width() - 10;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh, nw];
}
function animateDiv($target) {
var newq = makeNewPosition($target.parent());
var oldq = $target.offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$target.animate({
top: newq[0],
left: newq[1]
}, speed, function() {
animateDiv($target);
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.03;
var speed = Math.ceil(greatest / speedModifier);
return speed;
}
}( jQuery ));

Utilisation:

$(document).ready(function() {
$('.rand').randomizeBlocks();
});

http://jsfiddle.net/fmvtb88d/

OriginalL'auteur Shay Zalman

Vous devez vous connecter pour publier un commentaire.