Accueil > > > DÉGRADÉ DE TEXTE
 DÉGRADÉ DE TEXTE
 Information sur la source
 Description
Petite fonction pour retourner un texte html en dégradé Conversion hex inclues Explication des variables : R1, G1, B1 : color1 décomposé R2, G2, B2 : color2 décomposé FR, FG, FB : facteurs de la différence de couleur par lettre Exemple d'utilisation : html = degrade('1234567890', '000000', 'FFFFFF');
 Source
- function d2h(d) {
- var tmp = d.toString(16);
- if (tmp.length < 2) {tmp = "0" + tmp;}
- return tmp;
- }
- function h2d(h) { return parseInt(h, 16); }
- function degrade(text, color1, color2) {
- var len = text.length;
- var R1, G1, B1;
- var R2, G2, B2;
- var FR, FG, FB;
- var tmp = "";
- R1 = h2d(color1.substr(0, 2)); G1 = h2d(color1.substr(2, 2)); B1 = h2d(color1.substr(4, 2));
- R2 = h2d(color2.substr(0, 2)); G2 = h2d(color2.substr(2, 2)); B2 = h2d(color2.substr(4, 2));
- FR = (Math.abs(R1 - R2) / len); FG = (Math.abs(G1 - G2) / len); FB = (Math.abs(B1 - B2) / len);
- for (var i = 1; i <= len; i++) {
- if(i == 1){
- tmp += '<font color="#' + color1 + '">' + text.substring(i - 1, i) + '</font>';
- }else{
- var R, G, B;
- if (R1 >= R2) { R = Math.abs( R1 - Math.round(FR * i)); } else { R = R1 + Math.round(FR * i); }
- if (G1 >= G2) { G = Math.abs( G1 - Math.round(FG * i)); } else { G = G1 + Math.round(FG * i); }
- if (B1 >= B2) { B = Math.abs( B1 - Math.round(FB * i)); } else { B = B1 + Math.round(FB * i); }
- tmp += '<font color="#' + d2h(R) + d2h(G) + d2h(B) + '">' + text.substring(i - 1, i) + '</font>';
- }
- }
- return tmp;
- }
function d2h(d) {
var tmp = d.toString(16);
if (tmp.length < 2) {tmp = "0" + tmp;}
return tmp;
}
function h2d(h) { return parseInt(h, 16); }
function degrade(text, color1, color2) {
var len = text.length;
var R1, G1, B1;
var R2, G2, B2;
var FR, FG, FB;
var tmp = "";
R1 = h2d(color1.substr(0, 2)); G1 = h2d(color1.substr(2, 2)); B1 = h2d(color1.substr(4, 2));
R2 = h2d(color2.substr(0, 2)); G2 = h2d(color2.substr(2, 2)); B2 = h2d(color2.substr(4, 2));
FR = (Math.abs(R1 - R2) / len); FG = (Math.abs(G1 - G2) / len); FB = (Math.abs(B1 - B2) / len);
for (var i = 1; i <= len; i++) {
if(i == 1){
tmp += '<font color="#' + color1 + '">' + text.substring(i - 1, i) + '</font>';
}else{
var R, G, B;
if (R1 >= R2) { R = Math.abs( R1 - Math.round(FR * i)); } else { R = R1 + Math.round(FR * i); }
if (G1 >= G2) { G = Math.abs( G1 - Math.round(FG * i)); } else { G = G1 + Math.round(FG * i); }
if (B1 >= B2) { B = Math.abs( B1 - Math.round(FB * i)); } else { B = B1 + Math.round(FB * i); }
tmp += '<font color="#' + d2h(R) + d2h(G) + d2h(B) + '">' + text.substring(i - 1, i) + '</font>';
}
}
return tmp;
}
 Conclusion
J'attend vos avis ;)
 Historique
- 09 mai 2009 10:37:20 :
- Correction suite au commentaire de JDMCREATOR
- 11 mai 2009 19:55:55 :
- Correction selon Oppiz :D
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
De l'aide pour un petit jeu.... [ par Nini ]
Voilà le script d'une page : <html><head><title>..:: Challenge JavaScript Niveau: 5 :: Extra-Facile ::..</title> <script l
probleme avec couleur scrool I.E [ par Meduse ]
Votre texte ICIVotre texte ICIje place ce bout de code entre les balises <HEAD> et </HEAD> dans ma page hTML pour pouvoir collorer la scro
Tri inversé ?? [ par cctiger ]
Salut à tous !!!!J'utilise ce petit script très sympa qui permet de trier un tableau sans recharger la page. Le problème c'est qu'il permet de le trie
coulur du boutton [ par rich25200 ]
Bonjour,j'ai un prob.. j'ai un input type="button" style="backgrond-color:#000000> et j'aimerai qu'il change de couleur.... mais la tout va bien en
format HEX puis bmp [ par MisterJAD ]
bonjour,je suis pour ainsi dire nul en js (g jms trop cherché à apprendre ce language) mais j'aurais absolument besoin d'une fonction qui convertit de
question de menu [ par valouh ]
Bonjour les gens,je suis débutante et j'ai un ptit problème, je voudrais savoir si on peut faire ça:j'ai 2 menus différents et je voudrais faire un mi
changement de couleur d'un lien [ par vince062 ]
bonjour,je voudrais créer une méthode js permettant de modifier la couleur d'un lien mais j'y arrive po... É oué je suis encore novice!!En gros voila
UPDATE BASE AVEC CHAMPS PAR RAPPORT A JAVASCRIPT [ par rafou77 ]
Bonjour, voilà j'ai une page qui s'appel taux2.php ou là il ya des champs avec des taux dans une base que je peux mettre à jour sans prob... juste en
Setpixel (x,y) = color , color = getpixel (x,y) [ par frop01 ]
Salut,Je voudrais savoir, s'il existe une fonction de lecture et écriture d'un pixel en javascript ??if réponse==oui { alert ("expliquer");}Merci .
Changer l'attribut color [ par perig ]
Bonjoursvoila, j'aimerais pouvoir changer la couleurs d'un texte aprés avoir cliqué dessu.J'ai essayé de faire :<a href="javascript:color("font")"&
|
Derniers Blogs
 [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|