代码如下:
<!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; char
=gbk"><title>渐变背景</title>
<script>
var
Gradient = (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;
//cc_on 这个东西加上他两边
东西是有用
但是不知道是干什么用var p_isIE = /*@cc_on!@*/false;
//test
toDataURL is supported by Canvas since Safari may not support ittry{
p_dCtx.canvas.toDataURL
;}catch(err){
p_useCanvas = false;
};
(p_useCanvas){
function (dEl , sColor1 , sColor2 , bRepeatY ){(typeof(dEl) '
') dEl = document.getElementById(dEl);
(!dEl) false;var nW = dEl.off
Width;var nH = dEl.off
Height;p_dCanvas.width = nW;
p_dCanvas.height = nH;
var dGradient;
var sRepeat;
// Create gradients
(bRepeatY){dGradient = p_dCtx.createLinearGradient(0,0,nW,0);
sRepeat = 'repeat-y';
}
{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;
};
};
}
(p_isIE){p_dCanvas = p_useCanvas = p_dCtx = null;
function (dEl , sColor1 , sColor2 , bRepeatY){(typeof(dEl) '') dEl = document.getElementById(dEl);
(!dEl) 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('');};
}
{p_dCanvas = p_useCanvas = p_dCtx = null;
function(dEl, sColor1, sColor2){(typeof(dEl) '') dEl = document.getElementById(dEl);(!dEl) false;with(dEl.style){
backgroundColor = sColor2;
};
//alert('your browser does not support gradient effet');
}
}
}
)
;</script>
<style>
div.example{ border:solid 1px #555;margin:0 20px 20px 0;float:left; display:inline;margin:1em;background:#fff;width:300px;padding:40px;color:#222;font:xx-small/1.2 "Tahoma";text-align:just
y;}</style>
<body>
<h1>渐变背景-beta1</h1>
<h4>IE6,IE7,FF2测试通过.</h4>
<div id="example1"
="example"></div><div id="example2"
="example"> </div><div id="example3"
="example">fdsafdsafdsaf </div><div id="example4"
="example">fdsafdsafdsafdsa </div><div id="example5"
="example"> </div><div id="example6"
="example"> </div><script>
Gradient('example1','#4ddbbe','#d449cc',1);Gradient('example2','#46ddbd','#d8b617',0);Gradient('example3','#c81fc1','#bf445f',1);Gradient('example4','#2285e5','#d769eb',0);Gradient('example5','#8b4286','#eac87d',1);Gradient('example6','black','white',0);</script>
</body>
</html>
最新评论