想实现一个类似于CSDN -> FAQ列表页的渐变效果解决方案
日期：2014-05-16 浏览次数：20384 次
想实现一个类似于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;
下面是在网上找的类似的代码,希望高手帮忙改一个,或是提供一个,感谢!
<!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;
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
