关于Css滤镜渐变效果的问题？

http://job.csdn.net/ 首页的“最新招聘信息”的那个表格，当鼠标划过的时候我使用的就是这种背景色渐变。

解决方案 »

  1.   

    在哪呢？js和css里都没找到渐变控制的代码，藏的也太深了
    是用js控制的还是css呢，还是第三方
      

  2.   

    梅老师写的那个是当鼠标经过的时候颜色变到最深，然后移开的时候加了个渐变。利用的是多个setInterval
      

  3.   

    给你个类似的效果。。
    <html>
    <head>
    <style type="text/css">
    * {
    font-size:12px;
    color:#666666;
    }
    #wc {
    width: 300px;
    /*border-left:#0099CC 1px dashed;
    border-right: #0099CC 1px dashed;*/
    border-bottom: #0099CC 1px dashed;
    border-collapse: collapse;
    }
    #wc td {
    border-top:#0099CC 1px dashed;
    text-align: center;
    height:25px;
    }
    #wc tr {
    background-color:#F7FBFF;
    }
    </style>
    <script type="text/javascript">
    var MColor = function (o) {
    var me = this;
    me.all = new Array; //存储预变化对象
    me.ing = false; //是否以在变化中
    me.rows = o.rows; //存储表格所有行
    me.max = 10; //设置变化次数
    me.min = 6; //设置变化值 (注：此项必须为num的倍数)
    me.num = 6; //设置经过和离开的倍数
    me.time = 10; //设置变化间隔时间
    };
    MColor.prototype = {
    IE : /MSIE/.test(window.navigator.userAgent),
    addEvent : function (a, b, c, d) {
    //添加事件
    if (a) {
    if (a.attachEvent)
    a.attachEvent(b[0], c);
    else if (a.addEventListener)
    a.addEventListener(b[1] || b[0].replace(/^on/, ""), c, d || false);
    }
    },

    reColor : function (o, b) {
    //获取颜色
    return o.bgColor ? o.bgColor :
    o.style.backgroundColor ? o.style.backgroundColor :
    b ? o.currentStyle.backgroundColor :
    document.defaultView.getComputedStyle(o, null).getPropertyValue("background-color");
    },

    toColor : function (c, b) {
    //颜色转化 返回Array
    if (b) {
    return "#" + [(c[0] < 16 ? 0 : "") + c[0].toString(16),
    (c[0] < 16 ? 0 : "") + c[1].toString(16),
    (c[0] < 16 ? 0 : "") + c[2].toString(16)].join("");
    } else {
    var a = c.match(/^(#)(.{2})(.{2})(.{2})$/) || c.match(/^(rgb)\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/),
    n = (a[1] == "#" ? 16 : 10);
    return [parseInt(a[2], n), parseInt(a[3], n), parseInt(a[4], n)];
    }
    },

    cing : function () {
    //操作所有对象
    var me = this, a = me.all, color, i;
    if (a.length > 0) {
    for (i = 0 ; i < a.length; i ++) {
    if (a[i].num < me.max) {
    color = me.toColor(a[i].exec(), true);
    a[i].style.backgroundColor = color;
    a[i].num ++;
    //$("show").innerHTML += color + "<br \/>";
    } else {
    a[i].inary = false;
    a.splice(i, 1);
    }
    }
    window.setTimeout(function () {
    me.cing();
    }, me.time);
    } else {
    me.ing = false;
    }
    },

    exec : function (b) {
    //控制对象变化
    var a = this.rgb, n = b || this.ing;
    a[0] = Math.max(0, Math.min(255, a[0] + n)),
    a[1] = Math.max(0, Math.min(255, a[1] + n)),
    a[2] = Math.max(0, Math.min(255, a[2] + n));
    return a;
    },

    over : function (o) {
    //鼠标经过
    var me = this, mod;
    if (o.ing > 0) {
    o.ing = -1 * me.min;
    o.num = me.max - o.num;
    mod = o.num % me.num;
    if (mod) o.exec(Math.abs(me.min / me.num * mod));
    o.num = Math.floor(o.num / me.num);
    //$("show").innerHTML += "<hr \/>";
    if (!o.inary) {
    me.all[me.all.length] = o;
    o.inary = true;
    o.num = 0;
    }
    if (!me.ing) {
    me.ing = true;
    me.cing();
    }
    }
    },

    out : function (o) {
    //鼠标离开
    var me = this;
    //$("show").innerHTML += "<hr \/>";
    if (o.ing < 0) {
    o.ing = me.min / me.num;
    o.num = me.max - o.num * me.num;
    if (!o.inary) {
    me.all[me.all.length] = o;
    o.inary = true;
    }
    if (!me.ing) {
    me.ing = true;
    me.cing();
    }
    }
    },

    init : function () {
    //初始化设置添加方法/事件
    var me = this, getFunction = function (o, f) {
    return function () {
    f.call(me, o);
    };
    }, i;
    for (i = 0 ; i < me.rows.length ; i ++) {
    me.rows[i].exec = me.exec;
    me.rows[i].inary = false;
    me.rows[i].ing = me.min;
    me.rows[i].rgb = me.toColor(me.reColor(me.rows[i], me.IE));
    me.addEvent(me.rows[i], ["onmouseover"], getFunction(me.rows[i], me.over));
    me.addEvent(me.rows[i], ["onmouseout"], getFunction(me.rows[i], me.out));
    }
    }
    };
    var $ = function (id) {
    return document.getElementById(id);
    };
    window.onload = function () {
    var wc = new MColor($("wc"));
    wc.init();
    };
    </script>
    <table id="wc">
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
      <tr><td>8</td></tr>
      <tr><td>9</td></tr>
    </table>
    <div id="show"></div>