English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Este artículo ilustra un efecto de transición de color de respuesta al ratón implementado con JavaScript. Comparto con todos para referencias, como se detalla a continuación：
Imágenes de ejecución a continuación：
Código completo a continuación：
!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>Ejemplo de transición de color</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//Biblioteca básica:
//1.Obtener objeto：
function $(id) {}}
return typeof id == 'string'?document.getElementById(id): id;
}
//2Añadir escucha de eventos:
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;
}
}
//3La clase de "producción de objetos personalizados":
var Class = {
Create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
//4La combinación de propiedades de objetos:
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade = Class.Create();
colorFade.prototype = {
//1La inicialización de la clase:
initialize: function(obj, options){
this._obj = $(obj);//El objeto que se debe cambiar de color actual.
this._timer = null;//Temporizador.
this.SetOptions(options);//Parámetro de matriz传入。
this.Steps = Math.abs(this.options.Steps);
this.Speed = Math.abs(this.options.Speed);
//this._colorArr: se utiliza para almacenar la información de r.g.b del color actual.
this.StartColorArr = this._colorArr = this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.Background=this.options.Background;
//Desde el principio hasta el final, el gradiente de valores de los tres colores primarios r.g.b del desvanecimiento (es decir, cada vez que se desvanecerá se aumentará/Valor reducido).
this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]);2],this.EndColorArr[2]);
//Establecer el color del objeto:
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
}:function(sColor){
this._obj.style.color=sColor;
});
this._setObjColor(this.options.StartColor);
//Agregar eventos al objeto:
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2.Inicialización de atributos del objeto:
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,//Número de desvanecimientos
Speed: 20,//Velocidad de desvanecimiento, es decir, cada cuántos (Speed) milisegundos se desvanecerá una vez.
Background: true//¿Es degradado de fondo de objeto?
}
//Atributos de combinación:
Object.extend(this.options, options||{});
},
/*
3.obtiene el array de información del color "r.g.b" de un color específico:
sColor: el valor de color a calcular, en formato "#ccc000".
devuelve un 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);
}) else {
r=curColor.substr(0,1);
g=curColor.substr(1,1);
b=curColor.substr(2,1);
r+=r;
g+=g;
b+=b;
}
//devuelve el valor decimal de los datos hexadecimales:
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4.obtiene el valor de gradiente de transición del color base actual (r.g.b).
sRGB: el valor de color inicial (en decimal)
eRGB: el valor de color final (en decimal)
*/
getColorAddValue: function(sRGB, eRGB) {
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue>0&&stepValue<1){
stepValue=1;
}
return parseInt(stepValue);
},
/*
5.obtiene el array de información del color actual de transición "r.g.b".
startColor: el color de inicio, en formato "#ccc000";
iStep: el nivel actual de transición (es decir, la vez actual de transición).
devuelve el valor del color, 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.comienza la transición:
endColorArr: el array de información de color objetivo, en formato 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);
}
}
}
//devolver16numeral base
function Hex(i) {
if (i < 0) devolver "00";
else if (i > 255) devolver "ff";
else {
//Decimal a Hexadecimal：
var str = "0" + i.toString(16);
devolver str.subcadena(str.longitud - 2);
}
}
</script>
</cabecera>
<cuerpo>
<div id="test" estilo="alto:40px;ancho:200px;borde:1px sólido rojo;">
¡¡¡!
</div>
<div id="test1" estilo="alto:40px;ancho:200px;borde:1px sólido rojo;">
¿¿¿!
</div>
<div id="test2" estilo="alto:40px;ancho:200px;borde:1px sólido rojo;">
¡¡¡!
</div>
</cuerpo>
<script type="text/javascript">
var colorFade01=new colorFade("test",{InicioColor:'#000000',FinalColor:'#8AD4FF',Background:true});
var colorFade02=new colorFade("test",{InicioColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade03=new colorFade("test1"{InicioColor:'#000000',FinalColor:'#8AD4FF',Background:true});
var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade05=new colorFade("test2"{InicioColor:'#000000',FinalColor:'#8AD4FF',Background:true});
var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
</script>
</html>
PS: Aquí también recomiendo algunas herramientas relacionadas con el estilo de elementos web para que las refieran y utilicen:
Texto con Efectos en Línea/Herramienta de Generación de Texto en Color:
http://tools.jb51.net/aideddesign/colortext
Herramienta de Depuración en Línea de Linear Gradients (Gradientes Lineales) de Firefox:
http://tools.jb51.net/aideddesign/moz_LinearGradients
núcleo webkit de safari/Herramienta de Depuración en Línea de Linear Gradients (Gradientes Lineales) de Chrome
http://tools.jb51.net/aideddesign/webkit_LinearGradients
Para obtener más información sobre JavaScript, puede ver las secciones especiales de este sitio: 'Tutorial de Entrada de Objetos Orientados en JavaScript', 'Manual Completo de Operaciones y Trucos de Eventos en JavaScript', 'Resumen de Efectos de Cambio y Trucos en JavaScript', 'Resumen de Efectos Animados y Trucos en JavaScript', 'Resumen de Trucos de Error y Depuración en JavaScript', 'Resumen de Trucos de Estructuras de Datos y Algoritmos en JavaScript' y 'Resumen de Uso de Operaciones Matemáticas en JavaScript'.
Espero que lo descrito en este artículo pueda ayudar a todos a diseñar programas de JavaScript.
Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha subido de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar, y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.)