Effet de surbrillance en javascript

Soyez le premier à donner votre avis sur cette source.

Vue 9 025 fois - Téléchargée 756 fois

Description

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 / Exemple :


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 .

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
103
Date d'inscription
mardi 12 juillet 2011
Statut
Membre
Dernière intervention
3 janvier 2013

Basic facile a faire!
Messages postés
11
Date d'inscription
vendredi 28 septembre 2007
Statut
Membre
Dernière intervention
14 avril 2011

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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.