English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Cette exemple explique l'effet de dégradé de couleur répondu par le curseur réalisé en JavaScript. Partageons-le avec vous pour votre référence, voici les détails :
Effet de rendu suivant :
Code complet suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple de dégradé de couleur</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//Bibliothèque de base :
//1.Récupérer l'objet :
function $(id) {}}
return typeof id == 'string'?document.getElementById(id): id;
}
//2ajout d'écouteur d'événement:
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on"+sEventType, fnHandler);
});
oTarget["on"+sEventType] = fnHandler;
}
}
//3classe de génération d'objets personnalisés:
var Class = {
Create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
//4fusion des propriétés d'objet:
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade = Class.Create();
colorFade.prototype = {
//1initialisation de la classe:
initialize: function(obj, options){
this._obj = $(obj);//l'objet à changer de couleur actuel.
this._timer = null;//le chronomètre.
this.SetOptions(options);//paramètre de tableau传入。
this.Steps = Math.abs(this.options.Steps);
this.Speed = Math.abs(this.options.Speed);
//this._colorArr: utilisé pour stocker les informations RGB de la couleur actuelle.
this.StartColorArr = this._colorArr = this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
//this.Background=this.options.Background;/De début à fin, la valeur de gradient des trois couleurs primaires (rouge, vert, bleu) de transition (c'est-à-dire, chaque fois que la transition doit augmenter
Valeur diminuée).1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2]);
//Définir la couleur de l'objet :
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
}:function(sColor){
this._obj.style.color=sColor;
});
this._setObjColor(this.options.StartColor);
//Ajouter des événements à l'objet :
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2.Initialisation des propriétés de l'objet :
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,//Nombre de transitions
Speed: 20,//Vitesse de transition, c'est-à-dire à quelle fréquence (Speed) la transition a lieu toutes les millisecondes.
Background: true//Est-ce une transition de fond d'objet en arrière-plan ?
}
//Ajustement des propriétés :
Object.extend(this.options,options||{});
},
/*
3.Obtenir l'array des informations de la couleur en "r.g.b":
sColor: la valeur de couleur à calculer, format '#ccc000'.
Retourner un tableau.
*/
getColorArr: function(sColor) {
var curColor=sColor.replace("#","");
var r,g,b;
if(curColor.length>3{//Six chiffres
r=curColor.substr(0,2);
g=curColor.substr(2,2);
b=curColor.substr(4,2);
});
r=curColor.substr(0,1);
g=curColor.substr(1,1);
b=curColor.substr(2,1);
r+=r;
g+=g;
b+=b;
}
//Retourner la valeur décimale de données hexadécimales :
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4.Obtenir la valeur de gradient de transition de la couleur primaire actuelle (r.g.b).
sRGB: la couleur de départ (décimale)
eRGB: la couleur de fin (décimale)
*/
getColorAddValue: function(sRGB, eRGB) {
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue>0&&stepValue<1{
stepValue=1;
}
return parseInt(stepValue);
},
/*
5.Obtenir les informations de la couleur de transition actuelle en "r.g.b".
startColor: la couleur de départ, format '#ccc000';
iStep: le niveau actuel de transition (c'est-à-dire le nombre de fois que la transition actuelle s'est produite).
Retourner la valeur de la couleur, par exemple #fff000.
*/
getStepColor: function(sColor, eColor, addValue) {
if(sColor==eColor) {
return sColor;
} else if(sColor<eColor) {
return (sColor+addValue)>eColor?eColor: (sColor+addValue);
} else if(sColor>eColor) {
return (sColor-addValue)<eColor?eColor: (sColor-addValue);
}
},
/*
6.Commencer la transition:
endColorArr: l'array des couleurs cibles, informations en r.g.b.
*/
Fade: function(endColorArr) {
clearTimeout(this._timer);}}
var er=endColorArr[0],
eg=endColorArr[1],
eb=endColorArr[2],
r=this.getStepColor(this._colorArr[0],er,this._stepAddValueArr[0]),
g=this.getStepColor(this._colorArr[1],eg,this._stepAddValueArr[1]),
b=this.getStepColor(this._colorArr[2],eb,this._stepAddValueArr[2]);
this._colorArr=[r,g,b];
this._setObjColor("#"+Hex(r) + Hex(g) + Hex(b));
if(r!=er||g!=eg||b!=eb){
var oThis=this;
oThis._timer=setTimeout(function(){oThis.Fade(endColorArr)},oThis.Speed);
}
}
}
//返回16进制数
function Hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else {
//十进制 转成 十六进制：
var str = "0" + i.toString(16);
return str.substring(str.length - 2);
}
}
</script>
</head>
<body>
<div id="test" style="height:40px;width:200px;border:1px solid red;">
嘻嘻!
</div>
<div id="test1" style="height:40px;width:200px;border:1px solid red;">
呵呵!
</div>
<div id="test2" style="height:40px;width:200px;border:1px solid red;">
哈哈!
</div>
</body>
<script type="text/javascript">
var colorFade01=new colorFade("test",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade02=new colorFade("test",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade03=new colorFade("test1"{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade05=new colorFade("test2"{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
</script>
</html>
PS : Je recommande quelques outils de style d'élément Web pour vous référer et utiliser :
Texte spécial en ligne/Outil de génération de texte coloré :
http://tools.jb51.net/aideddesign/colortext
Outil de débogage en ligne Linear Gradients (graduations linéaires) de Firefox :
http://tools.jb51.net/aideddesign/moz_LinearGradients
safari avec noyau webkit/Outil de débogage en ligne Linear Gradients (graduations linéaires) de Chrome
http://tools.jb51.net/aideddesign/webkit_LinearGradients
Pour plus d'informations sur JavaScript, vous pouvez consulter les sujets spéciaux de ce site : <Tutoriel d'entrée en matière sur les objets orientés JavaScript>, <Tutoriel complet des opérations et des astuces sur les événements JavaScript>, <Résumé des effets de basculement et des astuces JavaScript>, <Résumé des effets d'animation et des astuces JavaScript>, <Résumé des astuces de correction des erreurs et de débogage JavaScript>, <Résumé des astuces de structures de données et d'algorithmes JavaScript> et <Résumé des utilisations des opérations mathématiques JavaScript>.
J'espère que ce qui est décrit dans cet article aidera à la conception de programmes JavaScript.
Déclaration : Le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué et téléversé par les utilisateurs d'Internet, ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)