- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
效果很好的基于Javascript的动态表格渐变效果，当我们把鼠标放到DIV表格的某一行的时候，这一行的颜色会发生渐变，不是突然渐变，而慢慢的变化，另一种是点击对应的表格行，该行会渐变，用到数据统计的时候可以使结构更清淅。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 表格动态渐变效果</title> <style> body {margin:0 25px; font:12px Verdana, Arial, Helvetica, sans-serif} h2 {font-size:14px; margin:25px 0} .divs div {display:block; padding:10px; border:2px solid black} .divs .lower {border-top:none} .divs .bold {font-weight:bold} .divs .darkgrey {border-color:#8b8b8b; margin-bottom:10px} </style> <script type="text/javascript"> function colorFade(id,element,start,end,steps,speed) { var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step; var target = document.getElementById(id); steps = steps || 20; speed = speed || 20; clearInterval(target.timer); endrgb = colorConv(end); er = endrgb[0]; eg = endrgb[1]; eb = endrgb[2]; if(!target.r) { startrgb = colorConv(start); r = startrgb[0]; g = startrgb[1]; b = startrgb[2]; target.r = r; target.g = g; target.b = b; } rint = Math.round(Math.abs(target.r-er)/steps); gint = Math.round(Math.abs(target.g-eg)/steps); bint = Math.round(Math.abs(target.b-eb)/steps); if(rint == 0) { rint = 1 } if(gint == 0) { gint = 1 } if(bint == 0) { bint = 1 } target.step = 1; target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed); } function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) { var target = document.getElementById(id); var color; if(target.step <= steps) { var r = target.r; var g = target.g; var b = target.b; if(r >= er) { r = r - rint; } else { r = parseInt(r) + parseInt(rint); } if(g >= eg) { g = g - gint; } else { g = parseInt(g) + parseInt(gint); } if(b >= eb) { b = b - bint; } else { b = parseInt(b) + parseInt(bint); } color = 'rgb(' + r + ',' + g + ',' + b + ')'; if(element == 'background') { target.style.backgroundColor = color; } else if(element == 'border') { target.style.borderColor = color; } else { target.style.color = color; } target.r = r; target.g = g; target.b = b; target.step = target.step + 1; } else { clearInterval(target.timer); color = 'rgb(' + er + ',' + eg + ',' + eb + ')'; if(element == 'background') { target.style.backgroundColor = color; } else if(element == 'border') { target.style.borderColor = color; } else { target.style.color = color; } } } // http://www.mb5u.com function colorConv(color) { var rgb = [parseInt(color.substring(0,2),16), parseInt(color.substring(2,4),16), parseInt(color.substring(4,6),16)]; return rgb; } </script> </head> <body> <h2>Div Background Transition</h2> <div class="divs"> <div id="testdiv" onmouseover="colorFade('testdiv','background','ffffff','d8e6ee')" onmouseout="colorFade('testdiv','background','d8e6ee','ecf2f5',25,50)">First Div</div> <div id="testdiv2" class="lower" onmouseover="colorFade('testdiv2','background','ffffff','d8e6ee')" onmouseout="colorFade('testdiv2','background','d8e6ee','ecf2f5',25,50)">Second Div</div> <div id="testdiv3" class="lower" onmouseover="colorFade('testdiv3','background','ffffff','d8e6ee')" onmouseout="colorFade('testdiv3','background','d8e6ee','ecf2f5',25,50)">Third Div</div> </div> <h2>Div Background Transition - <a href="javascript:colorFade('testdiv7','background','ffffff','e4cdcd',50,15)">div one</a> | <a href="javascript:colorFade('testdiv8','background','ffffff','e4cdcd',50,15)">div two</a> | <a href="javascript:colorFade('testdiv9','background','ffffff','e4cdcd',50,15)">div three</a></h2> <div class="divs"> <div id="testdiv7">First Div</div> <div id="testdiv8" class="lower">Second Div</div> <div id="testdiv9" class="lower">Third Div</div> </div> </body> </html>