Ajax yellow fade with javascript

  Yellow fade效果自37signals首先采用以来,已经得到了非常广泛的应用,这个小技巧把js和css结合在一起,是网页中刚被更新的部分的背景色由黄色渐变为白色,可以有效显示当前页面哪些部分刚被更新过。

代码
1 /**
2 * @author Admin
3 */
4  function fadeUp(element,red,green,blue)
5 {
6 if(element.fade)
7 {
8 clearTimeout(element.fade);
9 }
10 element.style.backgroundColor = "rgb("+red+","+green+","+blue+")";
11 if(red==255&&green==255&&blue==255)
12 return;
13 var newRed = red+Math.ceil((255-red)/10);
14   var newGreen = green+Math.ceil((255-green)/10);
15   var newBlue = blue+Math.ceil((255-blue)/10);
16
17 var repeat = function()
18 {
19 fadeUp(element,newRed,newGreen,newBlue);
20 }
21 setTimeout(repeat.100);
22 }

 

调用实例:

 

代码
1 function parseResponse(request)
2 {
3 if(request.readyState==4)
4 {
5 if(request.status == 200 || request.status == 304)
6 {
7 var details = document.getElementById("details");
8 details.innerHTML= requestText;
9 fadeUp(details,255,255,153);//yellow to white
10   }
11 }
12 }

 

More samples,see http://www.axentric.com/aside/fat/

posted @ 2010-10-15 10:37  知识碎片  阅读(263)  评论(0编辑  收藏  举报