Воскресенье, 2017-12-17, 8:48 PM
Игры и программы без установки Portable
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
ФОРУМ портала DM_55 » САЙТЫ, WEB-ДИЗАЙН, СКРИПТЫ, КОМПЬЮТЕРЫ » СКРИПТЫ ДЛЯ uCoZ » Плавно меняется цвет ссылки
Плавно меняется цвет ссылки
DM_55Дата: Пятница, 2009-03-13, 1:08 AM | Сообщение # 1
=сайт админ=
Группа: Администраторы
Сообщений: 292
Репутация: 5555
Статус: Offline
Проведя курсором по ссылки она плавно подсвечивается зелёным цветом.

Code
<script language="JavaScript">    
/*** 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    
*    
*************************************************/    
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);    
}    
</script>

есть ещё вариант переливания несколькими цветами ссылок:

размещаем один из скриптов:

чёрный:

Code
<SCRIPT TYPE="text/javascript" SRC="http://number.my1.ru/js/links/JSFX_black.js"></SCRIPT>

синий:

Code
<SCRIPT TYPE="text/javascript" SRC="http://number.my1.ru/js/links/JSFX_blue.js"></SCRIPT>

зелёный:

Code
<SCRIPT TYPE="text/javascript" SRC="http://number.my1.ru/js/links/JSFX_green.js"></SCRIPT>

жёлтый:

Code
<SCRIPT TYPE="text/javascript" SRC="http://number.my1.ru/js/links/JSFX_yellow.js"></SCRIPT>

оранжевый:

Code
<SCRIPT TYPE="text/javascript" SRC="http://number.my1.ru/js/links/JSFX_orange.js></SCRIPT>

красный:

Code
<SCRIPT TYPE="text/javascript" SRC="http://number.my1.ru/js/links/JSFX_red.js"></SCRIPT>

При необходимости, помогу установить скрипт БЕСПЛАТНО.


-=выложи файл в интернете - получи денежку!=-
 
ФОРУМ портала DM_55 » САЙТЫ, WEB-ДИЗАЙН, СКРИПТЫ, КОМПЬЮТЕРЫ » СКРИПТЫ ДЛЯ uCoZ » Плавно меняется цвет ссылки
Страница 1 из 11
Поиск:

Хостинг от uCoz