網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>層和布局特效代碼>

JavaScript 表格動(dòng)態(tài)漸變效果_層和布局特效

效果很好的基于Javascript的動(dòng)態(tài)表格漸變效果，當(dāng)我們把鼠標(biāo)放到DIV表格的某一行的時(shí)候，這一行的顏色會(huì)發(fā)生漸變，不是突然漸變，而慢慢的變化，另一種是點(diǎn)擊對(duì)應(yīng)的表格行，該行會(huì)漸變，用到數(shù)據(jù)統(tǒng)計(jì)的時(shí)候可以使結(jié)構(gòu)更清淅。

<!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 表格動(dòng)態(tài)漸變效果</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.wf0088.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>

所屬頻道：層和布局特效/更新時(shí)間：2013-01-08

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

JavaScript 表格動(dòng)態(tài)漸變效果_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些