<!DOCTYPE HTML>
<html>
<head>
<TITLE>Вертикальное меню Плавное изменение цвета объектов</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<style type="text/css">
UL LI {width:100px; border: 2px solid #FFCC99; margin: 1px; padding: 3px; list-style: none; font-weight: bold; color:#CCCCCC}
</style>
<script type="text/javascript">
function fade(sElemId, sRule, bBackward)
{
if (!document.getElementById(sElemId)) return;
var aRuleList = sRule.split(/\s*,\s*/);
for (var j = 0; j < aRuleList.length; j++)
{
sRule = aRuleList[j];
if (!fade.aRules[sRule]) continue;
var i=0;
if (!fade.aProc[sElemId])
{
fade.aProc[sElemId] = {};
}
else if (fade.aProc[sElemId][sRule])
{
i = fade.aProc[sElemId][sRule].i;
clearInterval(fade.aProc[sElemId][sRule].tId);
}
if ((i==0 && bBackward) || (i==fade.aRules[sRule][3] && !bBackward)) continue;
fade.aProc[sElemId][sRule] = {'i':i, 'tId':setInterval('fade.run("'+sElemId+'","'+sRule+'")', fade.aRules[sRule][4]),'bBackward':Boolean(bBackward)};
}}
fade.aProc = {};
fade.aRules = {};
fade.run = function(sElemId, sRule)
{
fade.aProc[sElemId][sRule].i += fade.aProc[sElemId][sRule].bBackward?-1:1;//изменяем индекс промежуточного цвета
var finishPercent = fade.aProc[sElemId][sRule].i/fade.aRules[sRule][3]; //процент содержания конечного цвета в текущем промежуточном цвете; изменяется от 0 (не включая 0) до 1 (1 = 100%)
var startPercent = 1 - finishPercent; //процент содержания начального цвета в текущем промежуточном цвете; изменяется от 1 до 0 (1 = 100%)
var aRGBStart = fade.aRules[sRule][0];
var aRGBFinish = fade.aRules[sRule][1];
document.getElementById(sElemId).style[fade.aRules[sRule][2]] = 'rgb('+
Math.floor( aRGBStart['r'] * startPercent + aRGBFinish['r'] * finishPercent ) + ','+
Math.floor( aRGBStart['g'] * startPercent + aRGBFinish['g'] * finishPercent ) + ','+
Math.floor( aRGBStart['b'] * startPercent + aRGBFinish['b'] * finishPercent ) +')';
if ( fade.aProc[sElemId][sRule].i == fade.aRules[sRule][3] || fade.aProc[sElemId][sRule].i ==0) clearInterval(fade.aProc[sElemId][sRule].tId);
}
fade.back = function (sElemId, sRule){fade(sElemId, sRule, true);};
fade.addRule = function (sRuleName, sFadeStartColor, sFadeFinishColor, sCSSProp, nMiddleColors, nDelay)
{
fade.aRules[sRuleName] = [fade.splitRGB(sFadeStartColor), fade.splitRGB(sFadeFinishColor), fade.ccs2js(sCSSProp), nMiddleColors || 50, nDelay || 1];
};
fade.splitRGB = function (color){var rgb = color.replace(/[# ]/g,"").replace(/^(.)(.)(.)$/,'010203').match(/.{2}/g); for (var i=0; i<3; i++) rgb[i] = parseInt(rgb[i], 16); return {'r':rgb[0],'g':rgb[1],'b':rgb[2]};};
fade.ccs2js = function (prop){var i; while ((i=prop.indexOf("-"))!=-1) prop = prop.substr(0, i) + prop.substr(i+1,1).toUpperCase() + prop.substr(i+2); return prop;};
</script>
<script type="text/javascript">
fade.addRule('fadeRule1',"#FFF","#FF4500", "background-color", 100, 1);
fade.addRule('fadeRule2',"#FFCC99","#f00", "border-color", 30, 1);
fade.addRule('fadeRule3',"#ccc","#000", "color", 50, 1);
</script>
</head>
<body>
<ul>
<li id="item1" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">Fade</li>
<li id="item2" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">Fade</li>
<li id="item3" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">Fade</li>
</ul>
</body>
</html>
