begin process at 2012 05 28 09:41:27
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Trucs Amusants

 > EFFET DE SURBRILLANCE EN JAVASCRIPT

EFFET DE SURBRILLANCE EN JAVASCRIPT


 Information sur la source

Note :
3 / 10 - par 2 personnes
3,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs Amusants Classé sous :surbrillance, couleur, transition, background, sans jquery Niveau :Débutant Date de création :18/07/2010 Vu / téléchargé :4 898 / 357

Auteur : zulrigh

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note


 Description

Cliquez pour voir la capture en taille normale
Bonjour, voici un effet très sympa à réaliser pour vos menu, ou tout autre chose selon votre imagination.
Il sagit d'un effet de transition de couleur de fond des cadres (Div ou autre) entierement fait en Javascript, marche sur tout les navigateurs

Source

  • function getReferenceToDiv(divId,oDoc)
  • {
  • if(document.getElementById)
  • {return document.getElementById(divId);}
  • if(document.all)
  • {return document.all[divId];}
  • if(!oDoc)
  • {oDoc = document;}
  • if(document.layers)
  • {
  • if(oDoc.layers[divId])
  • {return oDoc.layers[divId];}
  • else{
  • for( var x = 0, y; !y && x < oDoc.layers.length; x++)
  • {
  • y = getReferenceToDiv(divId,oDov.layers[x].document);
  • return y;
  • }
  • }
  • }
  • return false;
  • }
  • function bgColor(myReference,Hexcolor){
  • if( myReference.style ) { myReference = myReference.style; }
  • Hexcolor = "#"+Hexcolor;
  • myReference.background = Hexcolor;
  • myReference.backgroundColor = Hexcolor;
  • myReference.bgColor = Hexcolor;
  • }
  • function cutHex(h){return (h.charAt(0)=="#") ? h.substring(1,7) : h;}
  • function RtoH(n){if(n==null){return "00";}
  • var hexa="0123456789ABCDEF";
  • if(n==null){return "00";}
  • n=parseInt(n);if(n==0 || n==null){return "00";}
  • n=Math.max(0,n); n=Math.min(n,255);n=Math.round(n);
  • return hexa.charAt(Math.floor(n/16)) + hexa.charAt(n%16);}
  • function degradee(ref,Hex1,Hex2,Percent){
  • var rgb1=new Array();
  • rgb1[0] = parseInt((cutHex(Hex1)).substring(0,2),16);
  • rgb1[1] = parseInt((cutHex(Hex1)).substring(2,4),16);
  • rgb1[2] = parseInt((cutHex(Hex1)).substring(4,6),16);
  • var rgb2=new Array();
  • rgb2[0] = parseInt((cutHex(Hex2)).substring(0,2),16);
  • rgb2[1] = parseInt((cutHex(Hex2)).substring(2,4),16);
  • rgb2[2] = parseInt((cutHex(Hex2)).substring(4,6),16);
  • var dr = rgb1[0]-(Percent*(rgb1[0] - rgb2[0])) / 100;
  • var dg = rgb1[1]-(Percent*(rgb1[1] - rgb2[1])) / 100;
  • var db = rgb1[2]-(Percent*(rgb1[2] - rgb2[2])) / 100;
  • var color = RtoH(dr)+RtoH(dg)+RtoH(db);
  • bgColor(ref,color);
  • }
  • function surbrillance(id,millisec,HexInit,HexFinal){
  • var obj = getReferenceToDiv(id);
  • var timer=0;
  • var speed = Math.round(millisec / 100);
  • var o = 0;
  • for(var a=0;a<100;a++){
  • setTimeout(function(){degradee(obj,HexInit,HexFinal,o);o++;},(timer*speed));timer++;
  • }
  • }
function getReferenceToDiv(divId,oDoc)
{
	if(document.getElementById)
		{return document.getElementById(divId);}
	if(document.all)
		{return document.all[divId];}
	if(!oDoc)
		{oDoc = document;}
	if(document.layers)
		{
		if(oDoc.layers[divId])
			{return oDoc.layers[divId];}
		else{
			for( var x = 0, y; !y && x < oDoc.layers.length; x++)
				{
					y = getReferenceToDiv(divId,oDov.layers[x].document);
					return y;
				}
			}
		}
	return false;
}

function bgColor(myReference,Hexcolor){
if( myReference.style ) { myReference = myReference.style; }
Hexcolor = "#"+Hexcolor;
  myReference.background = Hexcolor;
  myReference.backgroundColor = Hexcolor;
  myReference.bgColor = Hexcolor;
}

function cutHex(h){return (h.charAt(0)=="#") ? h.substring(1,7) : h;}
function RtoH(n){if(n==null){return "00";}
	var hexa="0123456789ABCDEF";
	if(n==null){return "00";}
	n=parseInt(n);if(n==0 || n==null){return "00";}
	n=Math.max(0,n); n=Math.min(n,255);n=Math.round(n);
	return hexa.charAt(Math.floor(n/16)) + hexa.charAt(n%16);}
	
function degradee(ref,Hex1,Hex2,Percent){
var rgb1=new Array();
rgb1[0] = parseInt((cutHex(Hex1)).substring(0,2),16);
rgb1[1] = parseInt((cutHex(Hex1)).substring(2,4),16);
rgb1[2] = parseInt((cutHex(Hex1)).substring(4,6),16);

var rgb2=new Array();
rgb2[0] = parseInt((cutHex(Hex2)).substring(0,2),16);
rgb2[1] = parseInt((cutHex(Hex2)).substring(2,4),16);
rgb2[2] = parseInt((cutHex(Hex2)).substring(4,6),16);
var dr = rgb1[0]-(Percent*(rgb1[0] - rgb2[0])) / 100;
var dg = rgb1[1]-(Percent*(rgb1[1] - rgb2[1])) / 100;
var db = rgb1[2]-(Percent*(rgb1[2] - rgb2[2])) / 100;

var color = RtoH(dr)+RtoH(dg)+RtoH(db);
bgColor(ref,color);

}


function surbrillance(id,millisec,HexInit,HexFinal){
	var obj = getReferenceToDiv(id);
	var timer=0;
	var speed = Math.round(millisec / 100);
	var o = 0;
	for(var a=0;a<100;a++){
		setTimeout(function(){degradee(obj,HexInit,HexFinal,o);o++;},(timer*speed));timer++;
	}
}

 Conclusion

on retrouve les classiques convertisseurs Hex to RGB et vice versa .

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT
Source avec Zip Source avec une capture DEFILEMENT DE BANNIERE PUBLICITAIRE ; ROTATION DE CADRE
Source avec Zip Source avec une capture TELECHARGEMENT SANS RECHARGER LA PAGE
Source avec Zip Source avec une capture FADEIN EFFET DE FONDU, ANIMATION D'OPACITE TOUT EN JAVASCRIP...

 Sources de la même categorie

Source avec Zip IMAGES DÉFILANT SUR UN CYLINDRE (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DÉFILANT VERTICALEMENT (SCROLLING IMAGES) par william voirol
Source avec Zip IMAGES DANSANTES 4: MOUVEMENT DE LA TORTUE par william voirol
Source avec Zip IMAGES DANSANTES 3: MOUVEMENT ALÉATOIRE ORIENTÉ par william voirol
Source avec Zip IMAGES DANSANTES 2: MOUVEMENT ALÉATOIRE SANS SUPERPOSITIONS par william voirol

 Sources en rapport avec celle ci

COULEUR DE FOND SELON POSITION SOURIS par mailliam
Source avec Zip Source avec une capture PALETTE DE COULEUR par kazma
Source avec Zip Source avec une capture DEFILEMENT DE BANNIERE PUBLICITAIRE ; ROTATION DE CADRE par zulrigh
Source avec Zip Source avec une capture LIBRAIRIE DE GESTION DES COULEURS POUR CSS : COLORPARSER par ryosama
Source avec Zip CHANGER LA COULEUR DE LA PAGE par glork

Commentaires et avis

Commentaire de djtadpole le 27/07/2010 17:36:02 2/10

l'idée est bonne mais la transparence est perdu...
c'est aussi trop rapide...

Commentaire de HACKANDROID le 30/08/2011 23:45:34 4/10

Basic facile a faire!

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

sélection en surbrillance d'une branche d'un treeview [ par dim ] Bonjour,J'utilise un treeview dont la source excellente provient de http://www.javascriptfr.com/code.aspx?ID=25024.Mon probl&#232;me est que je voudra background [ par KapS ] voilà, je voudrais savoir s il y a moyen d inclure un fond d ecran, genre dégradé avec deux couleurs, de haut en bas, sans passer par une image. vous comment récupérer une couleur background d'option [ par tipouic ] Je voudrais trouver la solution pour récupérer une couleur en fond d'option qui est définie de maniére interractive.J'arrive à lui donner la couleur a Effet de transition CSS3 - changement de Background sur evenement [ par ju0123456789 ] Bonjour, J'ai 4 images, et 1 background appelé en javascript sur un évènement Onmouseover sur chacune des images qui appelle un bakcground différent. TRANSITION DE PAGES HTML5 [ par yakkhuru ] Bonjour Je suis en train de programmer un site avec plusieurs pages indépendantes et j'aimerais utiliser l'effet de transition entre pages en slide c Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur Javascript donnant la couleur inverse ? [ par Valki ] Bonjour,Je cherche un script permettant d'obtenir la couleur inverse d'une couleur donnée, afin de l'utiliser dans un script php de ce type :&lt;input changer la couleur d'un champ listbox d'un formulaire [ par mousstik ] Bonjour,Desespérée, je vous écris.J'ai un formulaire avec 2 list box, je realise des controles par exemple, lorsqu'une option 1 est selectionnée dans chager la couleur d'un champ listbox d'un formulaire [ par mousstik ] Bonjour,Desespérée, je vous écris.J'ai un formulaire avec 2 list box, je realise des controles par exemple, lorsqu'une option 1 est selectionnée dans changement de couleur sur zones reactives [ par hos ] Bonjour,Voila , j'ai un plan de ville(22ko) avec 4 zones reactives de couleurs différentes (4 quartiers) et je voudrais lors d'un passage de souris su


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,045 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales