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 ! 

ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车

ecshop 小程序 实现底部滑出效果
  • lch198548
  • lch198548
  • 2017年04月24日 15:21
  • 852

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

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

原生js实现fadein 和 fadeout淡入淡出效果

用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。 注...
  • hellochenlu
  • hellochenlu
  • 2016年09月17日 11:29
  • 3598

HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)

两个场景(即两个div视图)切换的时候,如果想添加个过渡动画,除了可以使用js来实现,还可以通过CSS3的animation属性来实现。 (注意:Internet Explorer 9 以及更早的...
  • u014063717
  • u014063717
  • 2016年03月17日 13:08
  • 8252

javascript 淡入淡出效果

New Web Project #dd{ width:200px; height:200px; background:red; opa
  • u012193330
  • u012193330
  • 2014年11月21日 13:53
  • 618

Axure实现淡入淡出效果

小伙伴们有可能在各大网站看到淡入淡出效果的动画,比如淘宝、京东,淘宝每天会把各种打折促销、今日推荐、限时抢购等做成淡入淡入或者向右活动等类似翻页的效果放在首页,吸引顾客的眼球,那么如何使用Axure来...
  • u010850027
  • u010850027
  • 2015年06月12日 07:55
  • 2803

Android:简单动画效果-淡入淡出播放

淡入淡出的切换效果很常见呢! 无论是Html5,JQuery,都经常用到呢, 这首Android的动画效果:一个深入,一个淡入淡出 实现起来也很简单: im...
  • ssh159
  • ssh159
  • 2017年04月04日 15:33
  • 893

Jquery和纯JS实现轮播图(二)--淡入淡出切换式

Jquery和纯JS实现轮播图(二)--淡入淡出切换式
  • m0_38099607
  • m0_38099607
  • 2017年05月16日 10:44
  • 780

Android 1分钟教你打造酷炫的引导页(实现ViewPager淡入淡出切换)

纯手工自制的Android引导页,实现了Viewpager切换的淡入淡出(页面不移动!)切换以及文字动画。 下面是效果演示: 实现思路+心路历程...: 其实别的都还蛮简单的,就是这...
  • qq_22770457
  • qq_22770457
  • 2016年08月05日 23:22
  • 4116

jQuery动画-淡入和淡出

hide()、show()、slideDown()、slideUp()是通过 display:none/block来实现的;fadeOut() 是通过透明度的方法,opacity=0,这个动画只调整元...
  • QQ80583600
  • QQ80583600
  • 2017年01月13日 13:05
  • 1096
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 让所有页面内容都有淡入淡出效果
举报原因:
原因补充:

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