首页 > 网络编程 > JavaScript > 网页特效 > 页面背景 > JavaScript渐变色 JavaScript实现渐变色效果(不使用图片) 2012-12-26 08:54:12 作者： JavaScript渐变色，不使用图片实现渐变色，这样有利的节省了时间省去使用图片的麻烦，而且占用资源极小，渐变色也均匀漂亮，我看了都目瞪口呆，非常值得学习哦，接下来为您详细介绍 <title>JavaScript渐变色</title> <script language="JavaScript1.2"> <!-- if (document.all){ one=new Array(); two=new Array(); var a=10;var b=11;var c=12;var d=13;var e=14;var f=15; var width = 350; var height = 20; var gap = 5; var direction = 0; //colour number 1 - enter 1st, 3rd and 5th numbers/letters of colour code one[0]=f; one[1]=f; one[2]=0; //colour number 2 - enter 1st, 3rd and 5th numbers/letters of colour code two[0]=0; two[1]=c; two[2]=0; //end configuration if(direction==0) var num = width / gap; if(direction==1) var num = height / gap; color2=new Array(); color1=new Array(); diff=new Array(); for(i=0;i<3;i++) { diff[i] = two[i] - one[i]; diff[i] = diff[i] / num; } for(i=0;i<3;i++){ color1[i] = Math.round(diff[i] * Math.pow(10, 0)); if(color1[i] > diff[i])color1[i] = color1[i] - 1; color2[i] = diff[i] - color1[i]; color2[i] = color2[i] * 15; color2[i] = Math.round(color2[i] * Math.pow(10, 0)); } x=new Array(); two[0]=0; two[1]=0; two[2]=0; document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+width+'" height="'+height+'">'); if(direction==0) document.write('<tr>'); for(i=0;i<=num;i++) { if(direction==1) document.write('<tr>'); document.write('<td bgcolor="#'); for(j=0;j<3;j++) { if(one[j]==a)document.write("a"); if(one[j]==b)document.write("b"); if(one[j]==c)document.write("c"); if(one[j]==d)document.write("d"); if(one[j]==e)document.write("e"); if(one[j]==f)document.write("f"); if(one[j]<10)document.write(one[j]); if(two[j]==a)document.write("a"); if(two[j]==b)document.write("b"); if(two[j]==c)document.write("c"); if(two[j]==d)document.write("d"); if(two[j]==e)document.write("e"); if(two[j]==f)document.write("f"); if(two[j]<10)document.write(two[j]); one[j] = one[j] + color1[j]; two[j] = two[j] + color2[j]; if(two[j]>15) { two[j] = two[j] - 15; one[j]++; } } if(direction==0) document.write('" width="'+gap+'" height="'+height+'"> </td>'); if(direction==1) document.write('" width="'+width+'" height="'+gap+'"> </td></tr>'); } document.write('</table>'); } //--> </script> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:JS实现图片延迟加载并淡入淡出效果的简单方法js实现图片淡入淡出切换简易效果js淡入淡出的图片轮播效果代码分享原生js和jquery实现图片轮播淡入淡出效果js运动框架_包括图片的淡入淡出效果js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）js实现图片从左往右渐变切换效果的方法JavaScript 渐变效果页面图片控制动感超强的JS图片轮换特效js实现图片无缝滚动特效原生js实现图片轮播特效JS实现淡入淡出图片效果的方法分析
