Javascript渐变褪色淡入淡出效果

阿超 发表于 2009-09-11 11:49 | 来源: | 阅读 304 次

在wordpress的效果代码中有一个fat.js文件,fat也就是The Fade Anything Technique 褪色技术

其作用是可以根据你指定的颜色按照一定的规则显示出渐变的褪色淡入淡出效果,用户ajax的审核评论,审核文章很是好用,而我们需要做的只是给需要效果的元素设置ID和ClassName.简单容易吧

代码如下,作者的官方站点我上不了了,需要的最好下个wordpress去找下里面的js文件

var Fat = {
  make_hex : function (r,g,b) 

{

r = r.toString(16); if (r.length == 1) r = '0' + r;

g = g.toString(16); if (g.length == 1) g = '0' + g;

b = b.toString(16); if (b.length == 1) b = '0' + b;

return "#" + r + g + b;

},

fade_all : function (dur)

{

var a = document.getElementsByTagName("*");

for (var i = 0; i < a.length; i++) 

{

var o = a[i];

var r = /fade-?(\w{3,6})?/.exec(o.className);

if (r)

{

if (!r[1]) r[1] = "";

if (o.id) Fat.fade_element(o.id,null,dur,"#"+r[1]);

}

}

},

fade_element : function (id, fps, duration, from, to) 

{

if (!fps) fps = 30;

if (!duration) duration = 3000;

if (!from || from=="#") from = "#FFFF33";

if (!to) to = this.get_bgcolor(id);

var frames = Math.round(fps * (duration / 1000));

var interval = duration / frames;

var delay = interval;

var frame = 0;

if (from.length < 7) from += from.substr(1,3);

if (to.length < 7) to += to.substr(1,3);

var rf = parseInt(from.substr(1,2),16);

var gf = parseInt(from.substr(3,2),16);

var bf = parseInt(from.substr(5,2),16);

var rt = parseInt(to.substr(1,2),16);

var gt = parseInt(to.substr(3,2),16);

var bt = parseInt(to.substr(5,2),16);

var r,g,b,h;

while (frame < frames)

{

r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));

g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));

b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));

h = this.make_hex(r,g,b);

setTimeout("Fat.set_bgcolor('"+id+"','"+h+"')", delay);

frame++;

delay = interval * frame; 

}

setTimeout("Fat.set_bgcolor('"+id+"','"+to+"')", delay);

},

set_bgcolor : function (id, c)

{

var o = document.getElementById(id);

o.style.backgroundColor = c;

},

get_bgcolor : function (id)

{

var o = document.getElementById(id);

while(o)

{

var c;

if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");

if (o.currentStyle) c = o.currentStyle.backgroundColor;

if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }

o = o.parentNode;

}

if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";

var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);

if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));

return c;

}

}

addLoadEvent(function ()  {

Fat.fade_all();

});
喜欢Java豆技术站点的文章,那就通过 RSS Feed 功能订阅阅读吧!

我要评论

*

* 绝不会泄露



返回首页 | 关于我们 | 联系我们 | 广告合作 | 网站地图 | 友情链接 | 版权声明 | 模板设计