login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:
Scripts > JS > Links en Knoppen > Fade Effect bij navigatie

Fade Effect bij navigatie

Auteur: Ontani - 21 juni 2006 - 21:31 - Gekeurd door: Maarten - Hits: 4688 - Aantal punten: 4.79 (7 stemmen)




Indien je de menu's wilt aanpassen, toevoegen of verwijderen gewoon de Array b, fadeTimerUp en fadeTimerDown aanpassen aan de id's van de menuopties.

de instellingen kan je veranderen door:
stepsize, speedfadeup en speedfadedown te veranderen.

de kleur van de menuopties wordt bepaald door de rgb van r, g en b[menuOption].
in dit geval wordt enkel de blauwe kleur veranderd en blijft de rest constant.

Veel plezier ermee.

Code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .menu {
  9. 	display: block;
  10. 	width: 200px;
  11. 	height: 30px;
  12. 	background-color: rgb(0,0,102);
  13. 	color: #FFFFFF;
  14. 	font-family: Arial, Helvetica, sans-serif;
  15. 	font-size: 20px;
  16. 	font-weight: bold;
  17. 	text-transform: capitalize;
  18. 	text-align: center;
  19. 	text-decoration: none;
  20. 	padding: 5px;
  21. }
  22. -->
  23. </style>
  24.  
  25. <script type="text/javascript">
  26. <!--
  27.  
  28.  /*
  29.                                  .......
  30.                           ..&MMMMMMMMMMMMMMNa..
  31.   .MMMMMMMa&..        .JMMMMMMMMM""""""WMMMMMMMMN&.        ..&MMMMMMMN.
  32.  JMMD!` .!?""MMa.  .JMMMMMMMY^`           ."WMMMMMMMa. ..MM#""!!  !"MMF
  33.  .MF           ."MMMMMMMMY'                   ?WMMMMMMM"^           JMF
  34.   JM.             .TMMMD                        .YMM"^              J#
  35.    Th         .N&..  .YN.                      ..#^  ..JNMp        .#
  36.     ?h      .MMMMMMM    7N.                  .JD`   JMMMMMMh      .@
  37.      .N.   .MMMMMM@       .Wx              .M"       .MMMMMMN    .D
  38.       .W.  dMMMMMF          .Yx          .#=           WMMMMMh  J^
  39.           JMMMMMF             .Yx      .#^              WMMMMMF
  40.          .MMMMMF                 T`   "!                 MMMMMM
  41.          JMMMMM                                          .MMMMMF
  42.          dMMMMF   JMMa.                           .&MMr   4MMMMF
  43.          MMMMM    MMMMMMa.                     ..MMMMMM   .MMMMF
  44.          MMMMF    MMMMMMMMNJ.               ..MMMMMMMMM    MMMMF
  45.          JMMMF    JMMMMMMMMMMN&.         ..MMMMMMMMMMMF    JMMMF
  46.          JMMM      TMMMMMMMMMM""""     """"MMMMMMMMMM"     JMMM^
  47.           WMMF                                             JMMF
  48.           .MMh                                             MMM!
  49.            JMM,                                           JMM5
  50.             JMM,                                         JMMt
  51.              .MMN.                                    ..MMM^
  52.                4MMMN&..                           ..+MMMMD
  53.                 .WMMMMMMMMMNN&&&&&&&&&&&&&&&NNMMMMMMMMM#'
  54.                   .UMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMY!
  55.                      ?WMMMMMMMMMMMMMMMMMMMMMMMMMMM#^
  56.                         J"WMMMMMMMMMMMMMMMMMMM#"!
  57.                              .7"""""""""""^!
  58.  */
  59.  
  60.  var r = 0 ;
  61.  var g = 0 ;
  62.  var bmin = 120;
  63.  var stepsize = 10;
  64.  
  65.  var speedfadeup = 10;
  66.  var speedfadedown = 50;
  67.  
  68.  var b = new Array();
  69.  b['menu1'] = 100;
  70.  b['menu2'] = 100;
  71.  b['menu3'] = 100;
  72.  b['menu4'] = 100;
  73.  b['menu5'] = 100;
  74.  b['menu6'] = 100;
  75.  
  76.  var fadeTimerUp = new Array();
  77.  fadeTimerUp['menu1'] = null;
  78.  fadeTimerUp['menu2'] = null;
  79.  fadeTimerUp['menu3'] = null;
  80.  fadeTimerUp['menu4'] = null;
  81.  fadeTimerUp['menu5'] = null;
  82.  fadeTimerUp['menu6'] = null;
  83.  
  84.  var fadeTimerDown = new Array();
  85.  fadeTimerDown['menu1'] = null;
  86.  fadeTimerDown['menu2'] = null;
  87.  fadeTimerDown['menu3'] = null;
  88.  fadeTimerDown['menu4'] = null;
  89.  fadeTimerDown['menu5'] = null;
  90.  fadeTimerDown['menu6'] = null;
  91.  
  92.  function fadeColorUp(menuOption) {
  93.    clearTimeout(fadeTimerDown[menuOption]);
  94.    document.getElementById(menuOption).style.backgroundColor = "rgb("+ r + "," + g + "," + b[menuOption] + ")";
  95.    b[menuOption] += stepsize;
  96.    if (b[menuOption] >= 250) {
  97.     clearTimeout(fadeTimerUp[menuOption]);
  98. 	document.getElementById(menuOption).style.backgroundColor = "rgb(0,0,250)";
  99. 	b[menuOption] = 250;
  100.    } else {
  101.     fadeTimerUp[menuOption] = setTimeout("fadeColorUp('"+menuOption+"')", speedfadeup); 
  102.    }
  103.  }
  104.  
  105.  function fadeColorDown(menuOption) {
  106.   clearTimeout(fadeTimerUp[menuOption]);
  107.    document.getElementById(menuOption).style.backgroundColor = "rgb("+ r + "," + g + "," + b[menuOption] + ")";
  108.    b[menuOption]-= stepsize;
  109.    if (b[menuOption] <= bmin) {
  110.     clearTimeout(fadeTimerDown[menuOption]);
  111. 	document.getElementById(menuOption).style.backgroundColor = "rgb(0,0,100)";
  112. 	b[menuOption] = 100;
  113.    } else {
  114.     fadeTimerDown[menuOption] = setTimeout("fadeColorDown('"+menuOption+"')", speedfadedown); 
  115.    }
  116.  }
  117.  
  118. -->
  119. </script>
  120. </head>
  121.  
  122. <body>
  123. <a class="menu" id="menu1" href="javascript:;" onmouseover="fadeColorUp('menu1');" onmouseout="fadeColorDown('menu1');">Option 1</a>
  124. <a class="menu" id="menu2" href="javascript:;" onmouseover="fadeColorUp('menu2');" onmouseout="fadeColorDown('menu2');">Option 2</a>
  125. <a class="menu" id="menu3" href="javascript:;" onmouseover="fadeColorUp('menu3');" onmouseout="fadeColorDown('menu3');">Option 3</a>
  126. <a class="menu" id="menu4" href="javascript:;" onmouseover="fadeColorUp('menu4');" onmouseout="fadeColorDown('menu4');">Option 4</a>
  127. <a class="menu" id="menu5" href="javascript:;" onmouseover="fadeColorUp('menu5');" onmouseout="fadeColorDown('menu5');">Option 5</a>
  128. <a class="menu" id="menu6" href="javascript:;" onmouseover="fadeColorUp('menu6');" onmouseout="fadeColorDown('menu6');">Option 6</a>
  129. </body>
  130. </html>
Download code! Download code (.txt)

 Bekijk een voorbeeld van dit script!
 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Lees de reacties (1)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.037s