JavaScript 黄色淡出效果-技术开发专区

JavaScript 黄色淡出效果

作者：ITPUB论坛编辑： nancy 2008-03-31 18:15

【IT168技术文档】

效果请将鼠标移到任意的链接上就能看到

下面直接看代码:

fadeUp=function(element,red,green,blue){
if(element.fade){
window.clearTimeout(element.fade);
}
var cssValue = "rgb("+red+","+green+","+blue+")";
element.style.backgroundColor = cssValue;
//$(element).css("background-color",cssValue);
if(red == 255 && green == 255 && blue == 255){
return;
}
var newRed = red + Math.ceil((255-red)/10);
var newGreen = green + Math.ceil((255-green)/10);
var newBlue = blue + Math.ceil((255-blue)/10);
var repeat = function(){
fadeUp(element,newRed,newGreen,newBlue);
};
element.fade=window.setTimeout(repeat,100);
}

好,我们来分析一下代码.
背景色用 rgb(red, green, blue) 来设置. 然后用到了一个递归的调用:

    var repeat = function(){
fadeUp(element,newRed,newGreen,newBlue);
};

递归的结果是背景色的值趋向#ffffff,也就是白色.
递归是通过 setTimeout(function(),time) 这个函数设置延时来实现的.这个函数的意思是每隔time时间片后就执行function()函数.后面的time的单位是毫秒.
clearTimeout()用于清除这个延时.

Enjoy!!

关注我们