EFFET DE CASCADE SUR DES IMAGES AVEC TRANSPARENCE...

Signaler
Messages postés
3472
Date d'inscription
lundi 16 juillet 2007
Statut
Membre
Dernière intervention
28 février 2014
-
dploux
Messages postés
2
Date d'inscription
mercredi 4 février 2009
Statut
Membre
Dernière intervention
15 mai 2010
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/46624-effet-de-cascade-sur-des-images-avec-transparence

dploux
Messages postés
2
Date d'inscription
mercredi 4 février 2009
Statut
Membre
Dernière intervention
15 mai 2010

Le script est parfait pour un effet sur une image mais quel dommage de ne pas pouvoir l'utiliser avec six images différentes sur le NET alors qu'il fonctionne très bien sur IE. à suivre
devsteph
Messages postés
15
Date d'inscription
mercredi 19 mars 2008
Statut
Membre
Dernière intervention
25 octobre 2010

salut

pourquoi mes images ne passent pas sous FF. On voit le cadre des images sans les images alors que sous IE7, c est impec.

merci

steph
ralecul
Messages postés
111
Date d'inscription
dimanche 23 mars 2003
Statut
Membre
Dernière intervention
1 août 2008

Salut!

J'ai modifié ton code sans chercher à comprendre comment il marche, il y a donc peut-être quelques erreurs.
Voici donc une version objet de ton code (bien que l'on ne puisse pas vraiment l'instancier plusieurs fois).

<html>
<head>
<title>Cascading Effect</title>
</head>

<script type="text/javascript">
new CascadingStyle("container");

/*
var effect = new CascadingStyle("container", {
onStart : function() { alert('start') },
onStop : function() { alert('stop') },
disableAutostart : true,
interval : 150
});

effect.start();

setTimeout(function() { effect.stop(); }, 10000);
*/

function $(id)
{
return document.getElementById(id);
}

function CascadingStyle(div, options)
{
var _options = options || {};var _div typeof(div) "string" ? $(div) : div;
var _imgs = _div.getElementsByTagName('img');
var _interval = _options.interval || 100;
var _disableAutostart = _options.disableAutostart || false;
var _onStart = _options.onStart || false;
var _onStop = _options.onStop || false;
var _working;

var _haut = [0,25,50,75,100,125];
var _hmax;
var _pic;
var _int;

function move()
{
for (var i=0; i<_imgs.length; ++i)
{
var img = _imgs[i];
img.style.top = _haut[i] + "px";
img.height = 50+2*_haut[i];
img.style.left = document.body.clientWidth/2 - img.width/2 + "px";
img.style.zIndex = _haut[i];
var pctge = 95*_haut[i]/(document.body.clientHeight - img.height);
img.style.filter = "alpha(opacity="+2*Math.sqrt(2500-(pctge-50)*(pctge-50))+")";
img.style.opacity = pctge/100;

if (_haut[i] < (document.body.clientHeight - img.height))
_haut[i] = _haut[i]+2;
else
{
if (i+1 == _imgs.length)
_haut[i] = _haut[0] - _int;
else
_haut[i] = _haut[i+1] - _int;
}
}
}

this.start = function()
{
_hmax = (document.body.clientHeight-50)/(1+2);
_int = _hmax/6.25;
for(var i=1; i<_imgs.length+1; i++)
_haut[i]=i*_int;

clearInterval(_working);
_working = setInterval(move, _interval);

if (_onStart)
_onStart(this);
};

this.stop = function()
{
clearInterval(_working);

if (_onStop)
_onStop(this);
};

if (!_disableAutostart)
this.start();
}
</script>

</html>
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Salut :)

alors , je vais essayer de faire quelques remarque constructives ;)

- code absolument pas commenté /!\
- Lenteur due au fait que tu lance un timer a chaque boucle
- tu refait des calculs qui devrait être des constantes ( exemple : document.body.clientWidth/2 )
- essaye de passer en objet tu y gagnera en clarté, en utilisation et en rapidité ;)