首页 - 文章 - Javascript - Javascript小技巧

用 javascript 实现文本及背景的淡入淡出效果

作者: YITU.org     来源: YITU.org     时间: 2007-02-01 20:50:01
摘要: 许多人都喜欢给页面的元素加上一点变化，以便引起浏览者的注意，而淡入淡出可以算是用的人比较多的效果了，本文向您展示的是用 javascript 实现文本及背景的淡入淡出，不过需要注意的是：一定要把握好变化的度，否则只能起到负面效应。
归类: Javascript,

关键词: 淡出, 淡入, fadeout, fadein, 背景, 文本, javascript,

许多人都喜欢给页面的元素加上一点变化，以便引起浏览者的注意，而淡入淡出可以算是用的人比较多的效果了，本文向您展示的是用 javascript 实现文本及背景的淡入淡出，不过需要注意的是：一定要把握好变化的度，否则只能起到负面效应。 

--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


Javascript:
  1.  
  2. <script type="text/javascript"> 
  3. <!-- 
  4. // 说明：用 javascript 实现文本及背景的淡入淡出效果 
  5. // 整理：http://www.CodeBit.cn 
  6.  
  7.     // 分离RGB颜色 0:R | 1:G | 2:B 
  8.     function parseRGB(color, type) 
  9.     { 
  10.         var start, len, result; 
  11.         len = (color.length == 4)?1:2; 
  12.         start = type * len + 1; 
  13.         result = color.substr(start, len); 
  14.         if(result.length == 1) result += result; 
  15.         return parseInt(result, 16); 
  16.     } 
  17.  
  18.     // 页面元素ID，源色彩，渐变色彩，淡入淡出步数，是否背景颜色（默认文字颜色） 
  19.     function fade(id, colorSource, colorFade, fadeStep, background) 
  20.     { 
  21.         var element = document.getElementById(id); 
  22.  
  23.         // 分解源色彩 
  24.         var rSource = parseRGB(colorSource, 0);    //红 R 
  25.         var bSource = parseRGB(colorSource, 1);    //绿 G 
  26.         var gSource = parseRGB(colorSource, 2);    //蓝 B 
  27.  
  28.         // 分解渐变色彩 
  29.         var rFade = parseRGB(colorFade, 0); 
  30.         var bFade = parseRGB(colorFade, 1); 
  31.         var gFade = parseRGB(colorFade, 2); 
  32.  
  33.         // 步数统计 
  34.         var step = 0; 
  35.  
  36.         // 设置定时器 
  37.         var fadeTimer = setInterval( 
  38.             function(){ 
  39.  
  40.                 var tmpStep = fadeStep - step; 
  41.  
  42.                 // 由于 floor() 计算不准确，当达到指定步数后直接赋值源色彩 
  43.                 if(step < fadeStep) 
  44.                 { 
  45.                     with(Math) 
  46.                     { 
  47.                         var rStep = floor((rSource - rFade) / tmpStep); 
  48.                         var bStep = floor((bSource - bFade) / tmpStep); 
  49.                         var gStep = floor((gSource - gFade) / tmpStep); 
  50.                     } 
  51.  
  52.                     rFade += rStep; 
  53.                     bFade += bStep; 
  54.                     gFade += bStep; 
  55.  
  56.                     if(background) 
  57.                     { 
  58.                         element.style.backgroundColor = 'rgb('+rFade+','+bFade+','+gFade+')'; 
  59.                     } 
  60.                     else 
  61.                     { 
  62.                         element.style.color = 'rgb('+rFade+','+bFade+','+gFade+')'; 
  63.                     } 
  64.                 } 
  65.                 else 
  66.                 { 
  67.                     if(background) 
  68.                     { 
  69.                         element.style.backgroundColor = colorSource; 
  70.                     } 
  71.                     else 
  72.                     { 
  73.                         element.style.color = colorSource; 
  74.                     } 
  75.  
  76.                     // 清除定时器 
  77.                     clearInterval(fadeTimer); 
  78.                 } 
  79.                 step ++; 
  80.             }, 
  81.             50 
  82.         ); 
  83.     } 
  84. //--> 
  85. </script> 
  86.  


示例代码：
HTML:
  1.  
  2. <style type="text/css"> 
  3. #test { 
  4.     background:#fff; 
  5.     border:1px solid #4B7705; 
  6.     color:#3BC209; 
  7.     text-align:center; 
  8.     width:550px; 
  9.     margin:0 auto; 
  10. } 
  11. </style> 
  12.  
  13. <div id="test"><h2>用javascript实现文本及背景的淡入淡出效果</h2></div> 
  14.  
  15. <div> 
  16.     <input type="button" value="背景淡入" onclick="fade('test','#3BC209','#fff',5,1)" /> 
  17.     <input type="button" value="文字淡入" onclick="fade('test','#fff','#3BC209',5);" /> 
  18.     <input type="button" value="文字淡出" onclick="fade('test','#3BC209','#fff',5);" /> 
  19.     <input type="button" value="背景淡出" onclick="fade('test','#fff','#3BC209',5,1)" /> 
  20. </div> 
  21.  



本文介绍的效果是本站编辑在名为『 风微柳细 』的 Blog 上发现的（原文名为：《用javascript实现文本的淡入淡出效果》），编辑随后征询了原作者的意见，原作者爽快的允许了本站转载，但是由于原作者写的代码命名规则不够清晰，不便于新手学习和二次开发，因此，本站按照原作者的思路重写了代码，并加上了“背景”的淡入淡出效果，在此，本站感谢原作者对本站的支持。


如果您对原作者及其 blog 感兴趣，可以通过下面的链接访问：
http://blog.iyi.cn/hily/archives/2006/08/javascript_4.html


相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)