javascript 让所有页面内容都有淡入淡出效果

转载 2007年10月12日 15:41:00
关于淡入淡出效果的实现,本站已经有文章介绍过,而本文介绍的是通过 javascript ,让所有的页面内容(可以设置背景色的元素)都能有淡入淡出效果,而我们需要做的只是给需要效果的元素设置ID和 className 。按照一定规则,你可以随意定义淡入淡出的颜色。

  1.  
  2. <script type="text/javascript">
  3. <!--
  4. // 说明:用 javascript 让所有页面内容都有淡入淡出效果
  5. // 整理:http://www.codebit.cn
  6.  
  7. // @name      The Fade Anything Technique
  8. // @namespace http://www.axentric.com/aside/fat/
  9. // @version   1.0-RC1
  10. // @author    Adam Michela
  11.  
  12. var Fat = {
  13.     make_hex : function (r,g,b) 
  14.     {
  15.         r = r.toString(16); if (r.length == 1) r = '0' + r;
  16.         g = g.toString(16); if (g.length == 1) g = '0' + g;
  17.         b = b.toString(16); if (b.length == 1) b = '0' + b;
  18.         return "#" + r + g + b;
  19.     },
  20.     fade_all : function ()
  21.     {
  22.         var a = document.getElementsByTagName("*");
  23.         for (var i = 0; i < a.length; i++) 
  24.         {
  25.             var o = a[i];
  26.             var r = /fade-?(/w{3,6})?/.exec(o.className);
  27.             if (r)
  28.             {
  29.                 if (!r[1]) r[1] = "";
  30.                 if (o.id) Fat.fade_element(o.id,null,null,"#"+r[1]);
  31.             }
  32.         }
  33.     },
  34.     fade_element : function (id, fps, duration, from, to) 
  35.     {
  36.         if (!fps) fps = 30;
  37.         if (!duration) duration = 3000;
  38.         if (!from || from=="#") from = "#FFFF33";
  39.         if (!to) to = this.get_bgcolor(id);
  40.         
  41.         var frames = Math.round(fps * (duration / 1000));
  42.         var interval = duration / frames;
  43.         var delay = interval;
  44.         var frame = 0;
  45.         
  46.         if (from.length < 7) from += from.substr(1,3);
  47.         if (to.length < 7) to += to.substr(1,3);
  48.         
  49.         var rf = parseInt(from.substr(1,2),16);
  50.         var gf = parseInt(from.substr(3,2),16);
  51.         var bf = parseInt(from.substr(5,2),16);
  52.         var rt = parseInt(to.substr(1,2),16);
  53.         var gt = parseInt(to.substr(3,2),16);
  54.         var bt = parseInt(to.substr(5,2),16);
  55.         
  56.         var r,g,b,h;
  57.         while (frame < frames)
  58.         {
  59.             r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
  60.             g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
  61.             b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
  62.             h = this.make_hex(r,g,b);
  63.         
  64.             setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);
  65.  
  66.             frame++;
  67.             delay = interval * frame; 
  68.         }
  69.         setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);
  70.     },
  71.     set_bgcolor : function (id, c)
  72.     {
  73.         var o = document.getElementById(id);
  74.         o.style.backgroundColor = c;
  75.     },
  76.     get_bgcolor : function (id)
  77.     {
  78.         var o = document.getElementById(id);
  79.         while(o)
  80.         {
  81.             var c;
  82.             if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
  83.             if (o.currentStyle) c = o.currentStyle.backgroundColor;
  84.             if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
  85.             o = o.parentNode;
  86.         }
  87.         if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
  88.         var rgb = c.match(/rgb/s*/(/s*(/d{1,3})/s*,/s*(/d{1,3})/s*,/s*(/d{1,3})/s*/)/);
  89.         if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
  90.         return c;
  91.     }
  92. }
  93.  
  94. window.onload = function () {
  95.     Fat.fade_all();
  96. }
  97. //-->
  98. </script>
  99.  
给你希望有淡入淡出效果的元素设置一个值为 fade 的 className,如:class="fade",默认的淡入淡出颜色是 #FFFF33,如果你想用其他颜色,只需要在 className 后面加上 "-你期望的颜色",如:class="fade-0000FF",这样的话,淡入淡出的颜色就是蓝色,是不是很方便?注意,元素一定要有 ID ! 

javascript 让所有页面内容都有淡入淡出效果

关于淡入淡出效果的实现,本站已经有文章介绍过,而本文介绍的是通过 javascript ,让所有的页面内容(可以设置背景色的元素)都能有淡入淡出效果,而我们需要做的只是给需要效果的元素设置ID和 cl...
  • let5flying
  • let5flying
  • 2007-10-12 15:41:00
  • 665

怎么让页面动起来,做视频背景

附带video相关参数一张
  • riuhazen
  • riuhazen
  • 2018-01-17 11:07:31
  • 201

css3 实现网页的淡入效果

用css3的animation动画属性实现网页的淡入,主要点在于改变页面的opacity属性。 Document @keyframes fadein{ 0%{opac...
  • u013993319
  • u013993319
  • 2016-09-24 11:36:39
  • 2770

jQuery-innerfade内部列表自动淡入…

jQuery-innerfade内部列表自动淡入淡出插件 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinx...
  • lovejesuslove
  • lovejesuslove
  • 2016-03-21 10:51:22
  • 201

HTML5 - 使某个页面元素或整个页面可编辑

1,把任何元素的contenteditable属性设置成true,点击即可以编辑该元素的内容 你可以编辑这段文本 2,也可以使用js来动态的开启和关闭编辑功能...
  • u014063717
  • u014063717
  • 2016-03-17 16:12:44
  • 1092

用两种方法快速简单的实现窗口淡入淡出

                                       DelphiIdiot(呆飞白痴)                                       Email...
  • DelphiIdiot
  • DelphiIdiot
  • 2004-05-07 18:49:00
  • 1040

Viewpager切换的淡入淡出切换(页面不移动)

本文转载自:http://blog.csdn.net/qq_22770457/article/details/52133288 纯手工自制的Android引导页,实现了Viewpag...
  • sugaryaruan
  • sugaryaruan
  • 2016-09-22 13:35:01
  • 1133

用原生js模拟jquery的淡入淡出fade效果

代码测试: html代码: Document #div{ display: none; width: 100px; height: 100px; b...
  • Szu_AKer
  • Szu_AKer
  • 2016-08-11 20:40:46
  • 3074

界面设计的技巧

最近做项目有些忙,百忙之中老师让我给新生讲下界面设计的知识o(╯□╰)o(只因自己会小弄些PS戳我),这就尴尬了讲什么好呢?偶然间看到刘哇勇前辈翻译过这篇文章,但是发现前辈第40点以后就没译了。我就打...
  • hezheqiang
  • hezheqiang
  • 2016-11-10 13:40:12
  • 196

特效天地——淡入淡出(真彩模式)

淡入淡出的英文是Fade in 、Fade out。前者指的是将一幅图象从黑色的背景里慢慢的透示出来,后者指的是是让一幅图象慢慢的消失在黑色的背景中去。几乎所有的游戏都用到了这种效果,在屏幕上的画面需...
  • ghj1976
  • ghj1976
  • 2000-07-28 18:06:00
  • 2248
收藏助手
不良信息举报
您举报文章:javascript 让所有页面内容都有淡入淡出效果
举报原因:
原因补充:

(最多只允许输入30个字)