想实现一个类似于CSDN -> FAQ列表页的渐变效果

不如干脆做个会动的gif图片算了~~~也不用去移坐标了~~

不过....gif动画做背景貌似不会动....

不太明白偶像net_lover(【孟子E章】) 所讲的意思.下面是实例页面的地址:
http://faq.csdn.net/ListFAQ.aspx?roomid=304把鼠标放到行上面,

先飘过的说
写过。。不过code不美观给kill了。。

我回来了。。忽忽。。
写了一个。。因为是用1个timeout执行的所以判断多了些。。
另外out的时候。。颜色变化速度也没有设置，还是和over的时候速度一样。。所以效果不是很PL忽忽。。去做东西了。。
用空在改下out。。
Code先贴上
<html>
<head>
<style type="text/css">
* {
font-size:12px;
color:#666666;
}
#wc {
width: 300px;
border-left:#0099CC 1px solid;
border-right: #0099CC 1px solid;
border-bottom: #0099CC 1px solid;
border-collapse: collapse;
}
#wc td {
border-top:#0099CC 1px solid;
text-align: center;
height:20px;
}
#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 = 15;
me.min = 15;
me.time = 50;
};
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) {
if (!b) {
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)];
} else 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("");
},

exec : function (a) {
var n = this.ing;
this.num ++;
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;
},

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(me.reColor(a[i], me.IE));
color = me.toColor(a[i].exec(color), true);
a[i].style.backgroundColor = color;
} else {
a[i].inary = false;
a.splice(i, 1);
}
}
window.setTimeout(function () {
me.cing();
}, me.time);
} else {
me.ing = false;
}
},

over : function (o) {
var me = this;
if (o.ing > 0) {
o.ing = -1 * me.min;
o.num = me.max - o.num;
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;
if (o.ing < 0) {
o.ing = me.min;
o.num = me.max - o.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.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>

修改完毕的说。。
<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>

这个效果是我写的。一个 highlight 效果，鼠标 over 的时候换深色， out 的时候换回原来的颜色，只不过在换深色/浅色的时候有一个渐进过程罢了。

T_T
刚仔细观察了下。。梅老师写的那个好象是。。
当over的时候颜色直接变成最深，out的时候渐变回原色。。

调试易

想实现一个类似于CSDN -> FAQ列表页的渐变效果

解决方案 »