GÉNÉRATEUR DE DÉGRADÉS
Mrreivax
Messages postés
100
Date d'inscription
mercredi 9 juin 2004
Statut
Membre
Dernière intervention
26 juin 2010
-
12 févr. 2008 à 21:10
cs_JossBeaumont Messages postés 2 Date d'inscription mercredi 27 février 2013 Statut Membre Dernière intervention 27 février 2013 - 27 févr. 2013 à 13:42
cs_JossBeaumont Messages postés 2 Date d'inscription mercredi 27 février 2013 Statut Membre Dernière intervention 27 février 2013 - 27 févr. 2013 à 13:42
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/45727-generateur-de-degrades
https://codes-sources.commentcamarche.net/source/45727-generateur-de-degrades
27 févr. 2013 à 13:42
23 janv. 2011 à 19:46
23 janv. 2011 à 19:08
- Par la simplicité
- l'économie de code
- l'utilisation de l'UC
.Il est même possible d'écrire du texte par dessus, pour faire des fonds de cellule<TD> avec texte, dans les <TABLE>.
Merci d'avoir fait cela.
1 nov. 2009 à 18:24
$("#line"+nbLine).animate({opacity: nbLine / maxLine});
Ca fait gagner 2 lignes...
Pour l'appel de la fonction gradient():
gradient(myDiv, myFirstColor, myDivLastColor, myDir)
myDiv : identifiant du div à remplir
myFirstColor : l'argument est inutile ici, le background original du div à remplir peut être défini dans le css. Donc à supprimer..
myDivLastColor : Couleur du dégradé
myDir : "X" ou "Y" pour verticale ou horizontal.
@+
1 nov. 2009 à 18:11
Sympa ce petit source :-) Je lui met 10 également, malgré le défaut d'une génération excessive de div. Une image de quelques octets avec 1px de width ou height, en background repeat donne l'équivalent et reste beaucoup plus léger. Néanmoins grâce à cette méthode on peut imaginer quelques dérivés, comme des animations par exemple. Je propose un petit équivalent via le plugin jquery :
function gradient(myDiv, myDivFirstColor, myDivLastColor, myDir)
{
var newLine;
var maxLine;
var newTop = 0;
var newLeft = 0;
var newOpacity = 1;
var myLineWidth = 1;
var myLineHeight = 1;
var myDivWidth = $("#" + myDiv).width();
var myDivHeight = $("#" + myDiv).height();
if (myDir == "X")
{
maxLine = myDivHeight;
myLineWidth = myDivWidth;
}
if (myDir == "Y")
{
maxLine = myDivWidth;
myLineHeight = myDivHeight;
}
for (nbLine = 0; nbLine < maxLine; nbLine++)
{
if (myDir == "X") newTop++;
if (myDir == "Y") newLeft++;
newLine = "
";
$("#" + myDiv).append(newLine);
newOpacity = nbLine / maxLine;
$("#line"+nbLine).animate({opacity: newOpacity});
}
}
Voilà, compatible tous navigateurs il me semble.
Merci!
18 févr. 2008 à 19:45
J'ai encore appris quelque chose :)
18 févr. 2008 à 18:28
18 févr. 2008 à 17:54
Il y a un truc dans ce script qui m'échappe !
Script étonnant (du moins pour moi, pauvre nouille que je suis).
13 févr. 2008 à 15:56
cdt
JAN
13 févr. 2008 à 15:15
Je te propose la structuration des 2 boucles For suivantes:
/**/
var g = document.createElement('div');
g.style.cssText = 'float:left;';
g.style.background = end;
if(document.getElementById('vertical').checked == true) {
g.style.height = '1px';
g.style.width = width + 'px';
borne = height;
}else {
g.style.height = height + 'px';
g.style.width = '1px';
borne= width;
}
for(i=0; i < borne ;i ++){
g.style.opacity = i/borne;
g.style.filter = 'alpha(opacity=' + i/(borne/100) + ')';
document.getElementById('gbase').appendChild(g);
}
/**/
Bien que testé sur FireFox 3, penses tu que cela soit fonctionnellement viable ?
Cdt
JAN
12 févr. 2008 à 21:10