Библиотека Javascript SE@RCHER

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Горизонтальное меню из линков с применением фильтра fade</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251">
<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];var startPercent=1-finishPercent;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(/^(.)(.)(.)$/,'$1$1$2$2$3$3').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;};fade.addRule('fadeRule1',"#FFF","#00CC66","background-color",100,1);fade.addRule('fadeRule2',"#006600","#006600","border-color",30,1);fade.addRule('fadeRule3',"#006600","#FFF","color",50,1);
</SCRIPT>
<style type="text/css">
UL LI {width:20px; border: 2px solid #FFCC99; margin: 1px; padding: 2px; list-style: none; font-weight: bold; color:#CCCCCC;float:left;text-align:center}
</style>
<script type="text/javascript">
//определяем правила фейдинга (цвета, изменяемое CSS свойство, количество промежуточных цветов и время задержки)
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" style="background:#f00">1</li>
<li  id="item2" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">2</li>
<li  id="item3" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">3</li>
<li  id="item4" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">4</li>
<li  id="item5" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">5</li>
<li  id="item6" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">6</li>
<li  id="item7" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">7</li>
<li  id="item8" onmouseover="fade(this.id, 'fadeRule1,fadeRule2,fadeRule3')" onmouseout="fade.back(this.id, 'fadeRule1,fadeRule2,fadeRule3')">8</li>
</ul>
</body>  
</html>