javascript 如何实现div 颜色的渐变？？
动态渐变
<span style="font-size:12px;"><html>
...
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>为了方便查看，使用内嵌样式，还是推荐使用外链样式的使用啊，接下来进行简单编写动态实现渐变效果
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>静态渐变
在css样式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
简单解释下：
linear：这个就碰到了线性渐变和径向渐变的两个概念，无非是在一条线上进行变化的线性和像圆一样向四周扩散的径向；
后面的四个值：分别代表相应方向的px值，可以从左顺时针转的顺序记忆，但是它代表的是to，截止到的颜色
from：这就是开始的颜色了
to：和from是同时出现的，最后渐变结束的颜色
而color-stop：则是指在变化到线的哪个位置的时候会出现什么颜色，当然是从周围过渡过去的，相当于from，to过渡点，from过渡点，to；附送下简单的其他的基本代码
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/
<!doctype html public '-//w3c//dtd html 4.01//en' 'http://www.w3.org/tr/html4/strict.dtd'>
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>渐变背景</title>
<script>
var setGradient = (function(){
//private variables;
var p_dCanvas = document.createElement('canvas');
var p_useCanvas = (typeof(p_dCanvas.getContext) == 'function');
//如果是IE则为null
var p_dCtx = p_useCanvas?p_dCanvas.getContext('2d'):null;
var p_isIE = /*@cc_on!@*/false;
//test if toDataURL() is supported by Canvas since Safari may not support it
try{
p_dCtx.canvas.toDataURL();
}catch(err){
p_useCanvas = false;
};
if(p_useCanvas){
return function (dEl , sColor1 , sColor2 , bRepeatY ){
if(typeof(dEl) == 'string')
dEl = document.getElementById(dEl);
if(!dEl)
return false;
var nW = dEl.offsetWidth;
var nH = dEl.offsetHeight;
p_dCanvas.width = nW;
p_dCanvas.height = nH;
var dGradient;
var sRepeat;
// Create gradients
if(bRepeatY){
dGradient = p_dCtx.createLinearGradient(0,0,nW,0);
sRepeat = 'repeat-y';
}else{
dGradient = p_dCtx.createLinearGradient(0,0,0,nH);
sRepeat = 'repeat-x';
}
dGradient.addColorStop(0,sColor1);
dGradient.addColorStop(1,sColor2);
p_dCtx.fillStyle = dGradient;
p_dCtx.fillRect(0,0,nW,nH);
var sDataUrl = p_dCtx.canvas.toDataURL('image/png');
with(dEl.style){
backgroundRepeat = sRepeat;
backgroundImage = 'url(' + sDataUrl + ')';
backgroundColor = sColor2;
};
};
}else if(p_isIE){
p_dCanvas = p_useCanvas = p_dCtx = null;
return function (dEl , sColor1 , sColor2 , bRepeatY){
if(typeof(dEl) == 'string')
dEl = document.getElementById(dEl);
if(!dEl)
return false;
dEl.style.zoom = 1;
var sF = dEl.currentStyle.filter;
dEl.style.filter+=' '+['progid:DXImageTransform.Microsoft.gradient(GradientType=',bRepeatY,',enabled=true,startColorstr=',sColor1,',endColorstr=',sColor2,')'].join('');
};
}else{
p_dCanvas = p_useCanvas = p_dCtx = null;
return function(dEl, sColor1, sColor2){
if(typeof(dEl) == 'string') dEl = document.getElementById(dEl);
if(!dEl) return false;
with(dEl.style){
backgroundColor = sColor2;
};
//alert('your browser does not support gradient effet');
}
}
}
)();
</script>
<body>
<h1>渐变背景-beta1</h1>
<h4>IE6,IE7,FF2测试通过.</h4>
<table cellspacing = "0" cellpadding = "0">
<tbody>
<tr>
<td><div id="mydiv" style="width: 200px; height: 150px">我的背景是渐变的</div></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
setGradient('mydiv','red','white',0);
</script>
</body>
</html>
以上代码原理也是css模拟，moz浏览器下用了canvas方法，ie下用了gradient滤镜模拟。
setGradient函数里四个参数，分别是 容器id，开始颜色，结束颜色，渐变方向。
你直接ps一个渐变的图片，1px宽，repeat-x就可以了。。。漂亮而且文件小。
JavaScript 颜色梯度和渐变效果
可以试试
参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?4=j&id=12413
