想实现一个类似于CSDN -> FAQ列表页的渐变效果
下面是在网上找的类似的代码,希望高手帮忙改一个,或是提供一个,感谢!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE= "JavaScript ">
function toHex(dec) {
var hexCharacters = "0123456789ABCDEF ";
if(dec < 0)
return "00 ";
if(dec > 255)
return "FF ";
var i = Math.floor(dec/16);
var j = dec%16;
return hexCharacters.charAt(i) + hexCharacters.charAt(j);
}
function setbgColor(red, green, blue){
//document.bgColor = "# " + toHex(red) + toHex(green) + toHex(blue);
document.getElementById( "obj ").style.backgroundColor = "# " + toHex(red) + toHex(green) + toHex(blue);
//alert(document.getElementById( "obj ").style.backgroundColor);
}
function fade(sred, sgreen, sblue, ered, egreen, eblue, step) {
for(var i = 0; i <= step; ++i) {
var red = Math.floor(sred * ((step - i) / step) + ered * (i / step));
var green = Math.floor(sgreen * ((step - i) / step) + egreen * (i / step));
var blue = Math.floor(sblue * ((step - i) / step) + eblue * (i / step));
setbgColor(red, green, blue);
}
}
</SCRIPT>
</HEAD>
<BODY>
<table width=90% border=1>
<tr id= "obj ">
<td width=100% height=25 onmouseover= "fade(0, 0, 0, 255, 255, 255, 1280) "> </td>
</tr>
</table>
</BODY>
</HTML>
[解决办法]
帮顶
[解决办法]
使用背景图片
http://faq.csdn.net/ui/styles/index/bgContentPanelCaption.gif
[解决办法]
不如干脆做个会动的gif图片算了~~~也不用去移坐标了~~
[解决办法]
不过....gif动画做背景貌似不会动....
[解决办法]
先飘过的说。。。
写过。。不过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)];
} elsereturn "# " + [(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 的时候换回原来的颜色，只不过在换深色/浅色的时候有一个渐进过程罢了。
[解决办法]
哈哈。。梅老师中午好，梅老师辛苦了。嘿嘿。。
我又重新把这个特效写了一变。。。。
不过这次比上次写的麻烦了好多。。但比上次的那个稳定了。。
