English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Questo articolo descrive un esempio di effetto di transizione di colore del mouse implementato in JavaScript. Lo condivido con tutti per riferimento, come segue:
L'effetto di esecuzione è il seguente:
Il codice completo è il seguente:
!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>Esempio di transizione di colore</title>
<script type="text/javascript">
//--------------------------------------------------------------------
// Libreria di base:
// 1. Ottenere l'oggetto:
function $(id) {
return typeof id=='string'?document.getElementById(id):id;
}
// 2. Aggiungere ascoltatore di eventi:
function addEventHandler(oTarget,sEventType,fnHandler) {
if(oTarget.addEventListener) {
oTarget.addEventListener(sEventType,fnHandler,false);
} else if(oTarget.attachEvent) {
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
}
// 3. Definire la classe di generazione degli oggetti personalizzati:
var Class={
Create: function() {
return function() {
this.initialize.apply(this,arguments);
}
}
}
// 4. Combinazione delle proprietà degli oggetti:
Object.extend=function(destination,source) {
for(var property in source) {
destination[property]=source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade=Class.Create();
colorFade.prototype={
// 1. Inizializzazione della classe:
initialize: function(obj, options) {
this._obj=$(obj); // L'oggetto che deve cambiare colore attualmente.
this._timer=null;//计时器。
this.SetOptions(options);//传入的数组参数。
this.Steps=Math.abs(this.options.Steps);
this.Speed=Math.abs(this.options.Speed);
//this._colorArr:用来寄存当前颜色的r.g.b信息。
this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.Background=this.options.Background;
//从开始到结束，r.g.b三种原色渐变的梯度值（即，每次渐变要增加/减少的值）。
this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2])];
//设置对象颜色：
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
:function(sColor){
this._obj.style.color=sColor;
};
this._setObjColor(this.options.StartColor);
//为对象添加事件：
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2. Inizializzazione delle proprietà dell'oggetto:
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,// numero di transizioni
Speed: 20,// velocità di transizione, ovvero ogni quanti (Speed) millisecondi la transizione avviene una volta.
Background: true// se è una transizione di sfondo dell'oggetto.
}
// Unire le proprietà:
Object.extend(this.options,options||{});
},
/*
3. Ottenere l'array di informazioni del colore "r.g.b" di un colore specifico:
sColor: valore di colore calcolato, formato "#ccc000".
Restituisce un array.
*/
getColorArr:function(sColor){
var curColor=sColor.replace("#","");
var r,g,b;
if(curColor.length>3){// valore di sei cifre
r=curColor.substr(0,2);
g=curColor.substr(2,2);
b=curColor.substr(4,2);
}else{
r=curColor.substr(0,1);
g=curColor.substr(1,1);
b=curColor.substr(2,1);
r+=r;
g+=g;
b+=b;
}
// Restituire il valore decimale del dati esadecimali:
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4. Ottenere il valore della progressione del colore primario corrente (r.g.b) in formato di transizione.
sRGB: valore di colore iniziale (decimale)
eRGB: valore di colore finale (decimale)
*/
getColorAddValue:function(sRGB,eRGB){
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue>0&&stepValue<1){
stepValue=1;
}
return parseInt(stepValue);
},
/*
5. Ottenere l'array di informazioni della colore di transizione corrente in formato "r.g.b".
startColor: colore di partenza, formato "#ccc000";
iStep: il livello di transizione corrente (cioè il numero di volte di transizione corrente).
restituisce il valore del colore, come #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. Inizia la transizione:
endColorArr: colore di destinazione, array di informazioni 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);
}
}
}
// restituisce il numero esadecimale
function Hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else {
//Decimal to hexadecimal conversion:
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;">
Xixi!
</div>
<div id="test1" style="height:40px;width:200px;border:1px solid red;">
Hoho!
</div>
<div id="test2" style="height:40px;width:200px;border:1px solid red;">
Haha!
</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: ecco alcune raccomandazioni di strumenti relativi allo stile degli elementi web per la tua riferimento e utilizzo:
Strumento online per generare testi con effetti speciali/testi a colori:
http://tools.jb51.net/aideddesign/colortext
Strumento di debug online per Linear Gradients (gradiente lineare) di Firefox:
http://tools.jb51.net/aideddesign/moz_LinearGradients
Strumento di debug online per Linear Gradients (gradiente lineare) del core webkit per safari/Chrome
http://tools.jb51.net/aideddesign/webkit_LinearGradients
Per ulteriori informazioni su JavaScript, puoi consultare le sezioni speciali di questo sito: 'Guida di base all'orientamento oggettuale JavaScript', 'Manuale completo di operazioni e tecniche di eventi JavaScript', 'Riassunto delle tecniche e delle tecniche di transizione JavaScript', 'Riassunto delle tecniche e delle tecniche di animazione JavaScript', 'Riassunto delle tecniche e delle tecniche di debug degli errori JavaScript', 'Riassunto delle tecniche e delle tecniche di strutture dati e algoritmi JavaScript' e 'Riassunto delle tecniche di calcolo matematico JavaScript'.
Spero che il contenuto di questo articolo possa essere utile per la progettazione di programmi JavaScript di tutti.
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright è della proprietà del rispettivo autore, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale correlata. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.