English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Эта статья рассказывает о реализации эффекта изменения цвета при ответе на мышь с помощью JavaScript. Предлагается для общего использования и рассмотрения, как показано ниже:
Результат выполнения приведен ниже:
Полный код приведен ниже:
!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>Пример цвета фейд</title>
<script type="text/javascript">
//--------------------------------------------------------------------
// Основная библиотека:
// 1. Получение объекта:
function $(id) {
return typeof id=='string'?document.getElementById(id):id;
}
// 2. Добавление слушателя событий:
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. Определение класса для создания объектов:
var Class={
Create: function() {
return function() {
this.initialize.apply(this,arguments);
}
}
}
// 4. Объединение свойств объекта:
Object.extend=function(destination,source) {
for(var property in source) {
destination[property]=source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade=Class.Create();
colorFade.prototype={
// 1. Инициализация класса:
initialize: function(obj, options) {
this._obj=$(obj); // Текущий объект, цвет которого нужно изменить.
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;
//Градиент значений трех основных цветов (от начального до конечного), который будет увеличиваться или уменьшаться при каждом изменении.
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. Инициализация свойств объекта:
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,// Количество градиентов
Speed: 20,// Скорость градиента, то есть через сколько (Speed) миллисекунд градиент изменяется.
Background: true// Является ли объект фоновым градиентом.
}
// Объединить свойства:
Object.extend(this.options,options||{});
},
/*
3. Получить информацию массива "r.g.b" для определенного цвета:
sColor: рассчитываемое значение цвета, формат "#ccc000".
Возвращаемый массив.
*/
getColorArr:function(sColor){
var curColor=sColor.replace("#","");
var r,g,b;
if(curColor.length>3){// Шестизначное значение
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;
}
// Возвратить десятичное значение данных в "шестнадцатеричном" формате:
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4. Получить значение градиента текущего исходного цвета (r.g.b).
sRGB: значение начального цвета (десятичное)
eRGB: значение цвета окончания (десятичное)
*/
getColorAddValue:function(sRGB,eRGB){
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
if(stepValue>0&&stepValue<1){
stepValue=1;
}
return parseInt(stepValue);
},
/*
5. Получить массив информации о текущем градиентном цвете "r.g.b".
startColor: начальный цвет, формат "#ccc000";
iStep: текущий уровень градиента (т.е. текущее количество градиентов).
возврат значения цвета, например #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. Начало градиента:
endColorArr:цельная цветовая информация, массив 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: Вот несколько инструментов для стилизации веб-элементов, которые могут быть полезны для вас:
Онлайн-инструмент для создания эффектных текстов/цветных текстов:
http://tools.jb51.net/aideddesign/colortext
Онлайн-инструмент отладки Linear Gradients для Firefox:
http://tools.jb51.net/aideddesign/moz_LinearGradients
Онлайн-инструмент отладки Linear Gradients для браузеров с веб-ядром Webkit (Safari/Chrome)
http://tools.jb51.net/aideddesign/webkit_LinearGradients
Более подробную информацию о JavaScript можно найти в разделе: "Введение в面向对象的 программирование на JavaScript", "Полное руководство по операциям и хитростям JavaScript", "Обзор эффектов и хитростей JavaScript", "Обзор анимационных эффектов и хитростей JavaScript", "Обзор ошибок и методов отладки JavaScript", "Обзор структур данных и алгоритмов JavaScript" и "Обзор методов математических вычислений JavaScript".
Надеюсь, что описание в этой статье поможет вам в разработке программ на JavaScript.
Заявление: данное содержимое взято из интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями интернета, самостоятельно загружен, сайт не обладает правами собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения, сайт немедленно удалят涉嫌侵权的内容。