效果请将鼠标移到任意的链接上就能看到
下面直接看代码:
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!!
posted on 2008-03-25 10:39
Q.Lee.lulu 阅读(669)
评论(6) 编辑 收藏 网摘 所属分类:
jQuery 、
JavaScript