公告

渐变色条

2008-01-07 09:32:44 作者：来源：互联网浏览次数：34 文字大小：【大】【中】【小】

看到彩色的色带吗？很Cool哦.

1.将下面的代码复制到<body>内

function breakApart(start) {
  // Split the hex # into the RGB components
  var temp = new Array()
  temp[0] = parseInt(start.substring(0,2),16)
  temp[1] = parseInt(start.substring(2,4),16)
  temp[2] = parseInt(start.substring(4,6),16)
  return temp
}

function diffParts(startInt, endInt, steps) {
  // Determine the increment amount for each step
  var temp = new Array()
  for (var i=0; i<3; i++)
    temp[i] = Math.round((endInt[i] - startInt[i]) / steps)
  return temp
}

function createHR(start, end, steps, width, height) {
  var startInt = breakApart(start)
  var endInt = breakApart(end)
  var stepList = diffParts(startInt, endInt, steps)
  str = "<TABLE width="+width + " height="+height
  var alignment = arguments[7] // Optional alignment argument
  if (null!=alignment) {
    alignment.toLowerCase()
    // Ignore values other than left, right, and center
    if ("left"==alignment)
      str+=" align=left"
    else if ("right"==alignment)
      str+=" align=right"
    else if ("center"==alignment)
      str+=" align=center"
  }
  str+=" cellspacing=0 cellpadding=0 border=0><TR>"
  for (var r=0; r < steps; r++) {
      var hr = prefix(startInt[0].toString(16))
      var hg = prefix(startInt[1].toString(16))
      var hb = prefix(startInt[2].toString(16))
      // increment color
      for (var i=0; i < 3; i++)
        startInt[i]+=stepList[i]

str+="<TD BGCOLOR="+hr + hg + hb+">"
      // Cross-browser version
      // Make sure to point the image to a valid
      // location on your server
      if (arguments[5]==true) str+="<IMG SRC='../../gifs/s.gif' WIDTH=1 HEIGHT=1>"
      str+="</TD>"
      // Vertical rule
      if ((arguments[6]==true) && (r < steps-1))
        str+="<TR>"

}
  str+="</TABLE>"
  return str
}
</script>

2.生成参数
createHR(startColor, endColor, steps, width, height
[, crossBrowser, direction [, align ]]])
startColor:开始的颜色; endColor:结束的颜色,steps:渐变的阶数;width:色带的长度;height:色带的宽;crossBrower:跨越浏览器;direction:方向

下面是本页用的参数例子
t1=createHR("00FF00","FF00FF",32,"50%",3, true)
t2=createHR("CCFF00","FF00CC",16,32,16, true)
t3=createHR("FF0000","FFFFFF",32,5,150, true, true, "left")
t4=createHR("FFFFFF","0000FF",32,5,150, true, true, "right")
t5=createHR("FFAA00","AA00EE",32,100,8, true, false, "center")
t6=createHR("00FFFF","FF00FF",32,32,32, true, true)
document.write(t1)
document.write(t2)
document.write(t3)
document.write(t4)
document.write(t5)
document.write(t6)

发表评论　加入收藏　告诉好友　打印本页　关闭窗口　返回顶部

推荐

公告

渐变色条