当前位置: 代码迷 >> JavaScript >> 想实现一个类似于CSDN -> FAQ列表页的渐变效果解决方案
  详细解决方案

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

热度:370   发布时间:2012-03-05 11:54:02.0
想实现一个类似于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) "> &nbsp; </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;
  相关解决方案