JavaScript 表格动态渐变效果_层和布局特效

效果很好的基于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>

所属频道：层和布局特效/更新时间：2013-01-08

[收藏][报错][返回列表]

JavaScript 表格动态渐变效果_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些