zoukankan      html  css  js  c++  java
  • JavaScript 黄色淡出效果

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

    下面直接看代码:

    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!!

  • 相关阅读:
    ByteBuffer用法总结
    内部类访问外部同名属性或者方法
    floodlight 学习(一)
    ubuntu 更改文件所有者
    python cmd 模块
    matlab 矩阵
    python操作MySQL数据库
    Win 7 下制作 mac 系统启动U盘
    Window 常用命令
    大数据扫盲
  • 原文地址:https://www.cnblogs.com/QLeelulu/p/1120854.html
Copyright © 2011-2022 走看看