English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este exemplo descreve o efeito de transição de cores do mouse implementado em JavaScript. Compartilho com todos para referência, detalhado como follows：
Efeito de execução如下：
Código completo如下：
<!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>Exemplo de transição de cores</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//Biblioteca básica:
//1.Obter objeto：
function $(id) {}}
return typeof id == 'string'?document.getElementById(id):id;
}
//2adicionar ouvinte de evento:
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 personalizada para criar objetos:
var Class = {
Create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
//4mergulha propriedades do objeto:
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade = Class.Create();
colorFade.prototype = {
//1inicialização da classe:
initialize: function(obj, options){
this._obj = $(obj);//o objeto atual a ser alterado de cor.
this._timer = null;//cronômetro.
this.SetOptions(options);//parâmetro de array传入。
this.Steps = Math.abs(this.options.Steps);
this.Speed = Math.abs(this.options.Speed);
//this._colorArr: usado para armazenar as informações de r.g.b da cor atual.
this.StartColorArr = this._colorArr = this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.Background=this.options.Background;
//Gradiente de transição dos três componentes primários (r, g, b) do começo ao fim (isto é, a cada transição, aumentar/Valor reduzido).
this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]);2],this.EndColorArr[2]);
//Definir cor do objeto:
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
}:function(sColor){
this._obj.style.color=sColor;
});
this._setObjColor(this.options.StartColor);
//Adicionar evento ao objeto:
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2.Inicialização de atributos do objeto:
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,//Número de transições
Speed: 20,//Velocidade de transição, ou quanto (Speed) milissegundos para cada transição.
Background: true//Se é suave transição de fundo.
}
//Atributos de combinação:
Object.extend(this.options, options||{});
},
/*
3.obter informações do array de cor "r.g.b" de uma cor específica:
sColor: valor de cor a ser calculado, formatado como "#ccc000".
retorna um array.
*/
getColorArr: function(sColor) {
var curColor=sColor.replace("#", "");
var r, g, b;
if(curColor.length>3){//valor de seis dígitos
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;
}
//retorna o valor decimal de dados hexadecimais:
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4.obter o valor de gradiente da transição gradual do cor atual (r.g.b).
sRGB: valor de cor de início (em decimal)
eRGB: cor de destino (em decimal)
*/
getColorAddValue: function(sRGB, eRGB) {
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue>0 && stepValue<1){
stepValue=1;
}
return parseInt(stepValue);
},
/*
5.obter informações do array de cor atual da transição gradual "r.g.b".
startColor: cor de início, formatada como "#ccc000";
iStep: nível atual da transição gradual (ou seja, a vez atual da transição gradual).
retorna o valor da cor, como #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.começar a transição gradual:
endColorArr: cor de destino, array de informações r.g.b.
*/
Fade: function(endColorArr) {
clearTimeout(this._timer);}}
var er=fimCorArr[0],
eg=fimCorArr[1],
eb=fimCorArr[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));
se(r!=er||g!=eg||b!=eb){
var oThis=this;
oThis._timer=setTimeout(function(){oThis.Fade(fimCorArr)},oThis.Velocidade);
}
}
}
//devolve16número de base
function Hex(i) {
if (i < 0) retorna "00";
else if (i > 255) retorna "ff";
else {
//Converter de decimal para hexadecimal：
var str = "0" + i.toString(16);
retorna str.substring(str.tamanho - 2);
}
}
</script>
</cabeça>
<corpo>
<div id="test" style="altura:40px;largura:200px;largura:1px sólido vermelho;">
Xixi!
</div>
<div id="test1" estilo="altura:40px;largura:200px;largura:1px sólido vermelho;">
Hehe!
</div>
<div id="test2" estilo="altura:40px;largura:200px;largura:1px sólido vermelho;">
Haha!
</div>
</corpo>
<script type="text/javascript">
var colorFade01=new colorFade("test",{InícioCor:'#000000',FimCor:'#8AD4FF',Background:true});
var colorFade02=new colorFade("test",{InícioCor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade03=new colorFade("test1"{InícioCor:'#000000',FimCor:'#8AD4FF',Background:true});
var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade05=new colorFade("test2"{InícioCor:'#000000',FimCor:'#8AD4FF',Background:true});
var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
</script>
</html>
PS: Aqui estão algumas ferramentas de estilo de elementos da página da web para referência e uso:
Texto com Efeitos Online/Ferramenta de Geração de Texto Colorido:
http://tools.jb51.net/aideddesign/colortext
Ferramenta de Depuração Online de Linear Gradients no Firefox (Gradientes Lineares):
http://tools.jb51.net/aideddesign/moz_LinearGradients
safari com kernel webkit/Ferramenta de Depuração Online de Linear Gradients no Chrome (Gradientes Lineares)
http://tools.jb51.net/aideddesign/webkit_LinearGradients
Mais sobre JavaScript, você pode ver a seção especial deste site: <Tutorial de Entrada para Programação Orientada a Objetos em JavaScript>, <大全 de Operações e Técnicas Relacionadas a Eventos em JavaScript>, <Resumo de Efeitos de Alternância e Técnicas em JavaScript>, <Resumo de Efeitos de Animação e Técnicas em JavaScript>, <Resumo de Técnicas de Erro e Depuração em JavaScript>, <Resumo de Técnicas de Estruturas de Dados e Algoritmos em JavaScript> e <Resumo de Uso de Operações Matemáticas em JavaScript>.
Espero que o que é descrito neste artigo ajude a todos a programar em JavaScript.
Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao autor original, foi submetido e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de infringir direitos autorais, seja bem-vindo a enviar e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Em caso de verificação, o site deletará imediatamente o conteúdo suspeito de infringir direitos autorais.)