[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
uCoz скрипт, плавно подсвечивающий ссылки
Dim120Дата: Суббота, 06.11.2010, 14:23 | Сообщение # 1


Никто

Нет данных

Нет данных

Сообщений: 20

[ 4 ]


Вот ссылка на етот же скрипт: http://csclassik.ru/LinkFader/JSFX_green.js
Code
/*******************************************************************     
* File    : JSFX_LinkFader.js  ? JavaScript-FX.com  
* Created : 2002/09/05     
* Riped  : VOLKODAV  (777volkodav@mail.ru) www.coool.net.ru     
* Purpose : To create a more dynamic a:hover using fading  
* History     
* Date         Version        Description     
* 2002-09-05    1.0  First version  
***********************************************************************/  
/*** Create some global variables ***/  
if(!window.JSFX)JSFX=new Object();  

var LinkFadeInStep=20;  
var LinkFadeOutStep=5;  
var LinkEndColor="00FF00"  

var LinkStartColor="FFFFFF";  
var LinkFadeRunning=false;  

document.onmouseover = theOnOver;  
document.onmouseout  = theOnOut;  
if(document.captureEvents)  
        document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);  

/***********************************************  
*  
* Function    : getColor  
*  
* Parameters  :    start - the start color (in the form "RRGGBB" e.g. "FF00AC")  
*   end - the end color (in the form "RRGGBB" e.g. "FF00AC")  
*   percent - the percent (0-100) of the fade between start & end  
*  
* returns   : color in the form "#RRGGBB" e.g. "#FA13CE"  
*  
* Description : This is a utility function. Given a start and end color and  
*      a percentage fade it returns a color in between the 2 colors  
*  
* Author   : www.JavaScript-FX.com  
*  
*************************************************/  
function hex2dec(hex){return(parseInt(hex,16));}  
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}     
function getColor(start, end, percent)  
{  

     var r1=hex2dec(start.slice(0,2));  
     var g1=hex2dec(start.slice(2,4));  
     var b1=hex2dec(start.slice(4,6));  

     var r2=hex2dec(end.slice(0,2));  
     var g2=hex2dec(end.slice(2,4));  
     var b2=hex2dec(end.slice(4,6));  

     var pc=percent/100;  

     var r=Math.floor(r1+(pc*(r2-r1)) + .5);  
     var g=Math.floor(g1+(pc*(g2-g1)) + .5);  
     var b=Math.floor(b1+(pc*(b2-b1)) + .5);  

     return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));  
}  
/************************************************/  
JSFX.getCurrentElementColor = function(el)     
{     
     var result = LinkStartColor;  

     if (el.currentStyle)     
      result = (el.currentStyle.color);     
     else if (document.defaultView)     
      result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
     else if(el.style.color) //Opera  
      result = el.style.color;  

     if(result.charAt(0) == "#")      //color is of type #rrggbb  
      result = result.slice(1, 8);  
     else if(result.charAt(0) == "r") //color is of type rgb(r, g, b)  
     {  
      var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") );  
      var v2 = v1.split(",");  
      result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));  
     }  

     return result;  
}     
JSFX.findTagIE = function(el)  
{  
          while (el && el.tagName != 'A')  
                el = el.parentElement;  
     return(el);  
}  
JSFX.findTagNS= function(el)  
{  
          while (el && el.nodeName != 'A')  
                el = el.parentNode;  
     return(el);  
}  
function theOnOver(e)  
{  
     var lnk;  
     if(window.event)  
      lnk=JSFX.findTagIE(event.srcElement);  
     else  
      lnk=JSFX.findTagNS(e.target);  

     if(lnk)  
      JSFX.linkFadeUp(lnk);  
}  
JSFX.linkFadeUp = function(lnk)  
{  
     if(lnk.state == null)  
     {  
      lnk.state = "OFF";  
      lnk.index = 0;  
      lnk.startColor = JSFX.getCurrentElementColor(lnk);  
      lnk.endColor = LinkEndColor;  
     }  

     if(lnk.state == "OFF")  
     {  
      lnk.state = "FADE_UP";  
      JSFX.startLinkFader();  
     }  
     else if( lnk.state == "FADE_UP_DOWN"  
      || lnk.state == "FADE_DOWN")  
     {  
      lnk.state = "FADE_UP";  
     }  
}  
function theOnOut(e)  
{  
     var lnk;  
     if(window.event)  
      lnk=JSFX.findTagIE(event.srcElement);  
     else  
      lnk=JSFX.findTagNS(e.target);  

     if(lnk)  
      JSFX.linkFadeDown(lnk);  
}  
JSFX.linkFadeDown = function(lnk)  
{  
     if(lnk.state=="ON")  
     {  
      lnk.state="FADE_DOWN";  
      JSFX.startLinkFader();  
     }  
     else if(lnk.state == "FADE_UP")  
     {  
      lnk.state="FADE_UP_DOWN";  
     }  
}  
JSFX.startLinkFader = function()  
{  
     if(!LinkFadeRunning)  
      JSFX.LinkFadeAnimation();  
}  
/*******************************************************************  
*  
* Function    : LinkFadeAnimation  
*  
* Description : This function is based on the Animate function  
*          of animate.js (animated rollovers).  
*          Each fade object has a state. This function  
*          modifies each object and changes its state.  
*****************************************************************/  
JSFX.LinkFadeAnimation = function()  
{  
     LinkFadeRunning = false;  
     for(i=0 ; i<document.links.length ; i++)  
     {  
      var lnk = document.links[i];  
      if(lnk.state)  
      {  
       if(lnk.state == "FADE_UP")  
       {  
        lnk.index+=LinkFadeInStep;  
        if(lnk.index > 100)  
         lnk.index = 100;  
        lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

        if(lnk.index == 100)  
         lnk.state="ON";  
        else  
         LinkFadeRunning = true;  
       }  
       else if(lnk.state == "FADE_UP_DOWN")  
       {  
        lnk.index+=LinkFadeOutStep;  
        if(lnk.index>100)  
         lnk.index = 100;  
        lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

        if(lnk.index == 100)  
         lnk.state="FADE_DOWN";  
        LinkFadeRunning = true;  
       }  
       else if(lnk.state == "FADE_DOWN")  
       {  
        lnk.index-=LinkFadeOutStep;  
        if(lnk.index<0)  
         lnk.index = 0;  
        lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);
         
        if(lnk.index == 0)  
         lnk.state="OFF";  
        else  
         LinkFadeRunning = true;  
       }  
      }  
     }  
     /*** Check to see if we need to animate any more frames. ***/  
     if(LinkFadeRunning)  
      setTimeout("JSFX.LinkFadeAnimation()", 40);  
}

Сохраняеш себе этот файлик на комп(или в случае если ты копировал код, вместо скачивания по ссылке, то создаеш на компе тхт файл, перименовываеш его в .js и вставляеш туда код). Далее тебе нужно поменять настройки скрипта. Думаю нам хватит настроить только цвета ссылок. Они настраиваются в следующих строках (эти строки в скрипте, который ты скачал):
var LinkEndColor="00FF00" - цвет ссылки к которому она будет менять свой цвет
var LinkStartColor="FFFFFF"; - цвет ссылки, когда на нее не наведен курсор

Далее создаеш в файл менеджере папку jsfiles и загружаеш туда js файл с скриптом и на каждой странице, где тебе нужен этот эффект вставляеш код:

Code
<SCRIPT TYPE="text/javascript" SRC="/jsfiles/JSFX_green.js"></SCRIPT>
  • Страница 1 из 1
  • 1
Поиск: