加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

渐变的背景色,个人发现<绝对的炫>!

(2006-06-12 21:43:51)
分类: 时尚潮流类爱美心皆有之
博易天下的宗旨是:做自己的个性博客。
1.把下面的代码上传到网络硬盘,得到你的上传得到的地址
<script language="javascript">
// Select the colors (hexadecimal triplet value required)
// Please note that at least 3 colors are required!
var colors=new Array("#FFFF00","#00FFFF","#5fc700","#854b00","#76e07c","#FFAC00","#FFFF66","#ff0000","#FFFFFF","#850044","#B56AFF","#56B1FF")
// Set pause between colors (seconds)
  var pausebetweencolors=2
// What type of gradient should be applied Internet Explorer 5x or higher?
  // Set "none" or "horizontal" or "vertical"
  var gradient_effect="horizontal"
// Set speed (higher=slower)
  var speed=20
// How many times shall the effect be repeated?
  // Add a value between 1 and 9999999
  var i_loopmax=1000
///////////////////////////////////////////////////////////////////////////
  // CONFIGURATION ENDS HERE
  ///////////////////////////////////////////////////////////////////////////
// do not edit code below this line
  var pausesteps=40
  var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
  var redcol_1
  var redcol_2
  var redcol_1_b
  var redcol_2_b
  var greencol_1
  var greencol_2
  var greencol_1_b
  var greencol_2_b
  var bluecol_1
  var bluecol_2
  var bluecol_1_b
  var bluecol_2_b
 
  var rgbredfrom
  var rgbgreenfrom
  var rgbbluefrom
  var rgbredto
  var rgbgreento
  var rgbblueto
  var rgbrednow
  var rgbgreennow
  var rgbbluenow
var rgbredfrom_b
  var rgbgreenfrom_b
  var rgbbluefrom_b
  var rgbredto_b
  var rgbgreento_b
  var rgbblueto_b
  var rgbrednow_b
  var rgbgreennow_b
  var rgbbluenow_b
var colorhexafrom
  var colorhexato
var i_step=1
  var i_loop=0
  var i_colorsA=0
  var i_colorsB=1
  var i_colorsC=1
  var i_colorsD=2
pausebetweencolors*=1000
var browserinfos=navigator.userAgent
  var ie4=document.all&&!document.getElementByIdx
  var ie5=document.all&&document.getElementByIdx&&!browserinfos.match(/Opera/)
  var ns4=document.layers
  var ns6=document.getElementByIdx&&!document.all
  var opera=browserinfos.match(/Opera/)
  var browserok=ie4||ie5||ns4||ns6||opera
function translateintorgb() {
 var hexa=colors[i_colorsA]
  var hexared=hexa.substring(1,3)
  var hexagreen=hexa.substring(3,5)
  var hexablue=hexa.substring(5,7)
  rgbredfrom=parseInt("0x"+hexared)
  rgbgreenfrom=parseInt("0x"+hexagreen)
  rgbbluefrom=parseInt("0x"+hexablue)
  rgbrednow=rgbredfrom
  rgbgreennow=rgbgreenfrom
  rgbbluenow=rgbbluefrom
 
  var hexa=colors[i_colorsB]
  var hexared=hexa.substring(1,3)
  var hexagreen=hexa.substring(3,5)
  var hexablue=hexa.substring(5,7)
  rgbredto=parseInt("0x"+hexared)
  rgbgreento=parseInt("0x"+hexagreen)
  rgbblueto=parseInt("0x"+hexablue)
 
  var hexa=colors[i_colorsC]
  var hexared=hexa.substring(1,3)
  var hexagreen=hexa.substring(3,5)
  var hexablue=hexa.substring(5,7)
  rgbredfrom_b=parseInt("0x"+hexared)
  rgbgreenfrom_b=parseInt("0x"+hexagreen)
  rgbbluefrom_b=parseInt("0x"+hexablue)
  rgbrednow_b=rgbredfrom_b
  rgbgreennow_b=rgbgreenfrom_b
  rgbbluenow_b=rgbbluefrom_b
 
  var hexa=colors[i_colorsD]
  var hexared=hexa.substring(1,3)
  var hexagreen=hexa.substring(3,5)
  var hexablue=hexa.substring(5,7)
  rgbredto_b=parseInt("0x"+hexared)
  rgbgreento_b=parseInt("0x"+hexagreen)
  rgbblueto_b=parseInt("0x"+hexablue)
  i_colorsA++
  i_colorsB++
  i_colorsC++
  i_colorsD++
  if (i_colorsA>=colors.length) {i_colorsA=0}
  if (i_colorsB>=colors.length) {i_colorsB=0}
  if (i_colorsC>=colors.length) {i_colorsC=0}
  if (i_colorsD>=colors.length) {i_colorsD=0}
 
  changefromto()
  }
function changefromto() {
  rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed)
  rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed)
  rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed)
 
  rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed)
  rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed)
  rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed)
 
  if (rgbrednow>255) {rgbrednow=255}
  if (rgbrednow<0) {rgbrednow=0}
  if (rgbgreennow>255) {rgbgreennow=255}
  if (rgbgreennow<0) {rgbgreennow=0}
  if (rgbbluenow>255) {rgbbluenow=255}
  if (rgbbluenow<0) {rgbbluenow=0}
 
  if (rgbrednow_b>255) {rgbrednow_b=255}
  if (rgbrednow_b<0) {rgbrednow_b=0}
  if (rgbgreennow_b>255) {rgbgreennow_b=255}
  if (rgbgreennow_b<0) {rgbgreennow_b=0}
  if (rgbbluenow_b>255) {rgbbluenow_b=255}
  if (rgbbluenow_b<0) {rgbbluenow_b=0}
 
  if (i_step<=speed) {
  redcol_1 = hexc[Math.floor(rgbrednow/16)];
  redcol_2 = hexc[Math.floor(rgbrednow)%16];
  greencol_1 = hexc[Math.floor(rgbgreennow/16)];
  greencol_2 = hexc[Math.floor(rgbgreennow)%16];
  bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
  bluecol_2 = hexc[Math.floor(rgbbluenow)%16];
 
  redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
  redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
  greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
  greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
  bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
  bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
  var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
  var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
  if (ie5 && gradient_effect!="none") {
  if (gradient_effect=="horizontal") {var gr_effect=1}
  if (gradient_effect=="vertical") {var gr_effect=0}
  document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"
  }
  else {
  document.bgColor=backcolor
  }
 i_step++
  var timer=setTimeout("changefromto()",pausesteps);
 
  }
  else {
  clearTimeout(timer)
  i_step=1
  i_loop++
  if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}
  }
  }
if (browserok) {
  window.onload=translateintorgb
  }
</script>
2.把如下的代码加到你的博客自定义面板
左侧代码:
<DIV style="RIGHT: 885px; POSITION: absolute; TOP: 12px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><IFRAME marginWidth=0 marginHeight=0 src="上传得到的地址" frameBorder=0 width=115 scrolling=no height=978></IFRAME></TD></TR></TBODY></TABLE></DIV>
右侧代码:
<DIV style="RIGHT: 0px; POSITION: absolute; TOP: 12px">
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD><IFRAME marginWidth=0 marginHeight=0 src="上传得到的地址" frameBorder=0 width=115 scrolling=no height=978></IFRAME></TD></TR></TBODY></TABLE></DIV>
关于如何上传已经讲的很清楚,不再赘述,假如你没有网络硬盘,可以本地上传。在此 本地上传
关于高度和宽度大家可以根据自己需要调节,代码详细说明见《绝对定位》。该特效的演示见: 博易天下特效试验区

文章引用自:http://blog.sina.com.cn/m/binghe2008

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有