div渐变背景的实现

<
html>
 

<
head>
 

<
meta 
http-equiv=content-type 
content="
text/html
 
charset=gbk"
>
 

<
title>
渐变背景<
/title>
 


<
script>
 


var 
setGradient 
= 
(function()
{ 


//private 
variables
 

var 
p_dCanvas 
= 
document.createElement(&
#39
canvas&
#39
)
 

var 
p_useCanvas 
= 
!!( 
typeof(p_dCanvas.getContext) 
== 
&
#39
function&
#39
)
 

var 
p_dCtx 
= 
p_useCanvas?p_dCanvas.getContext(&
#39
2d&
#39
):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) 
== 
&
#39
string&
#39
) 
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 
= 
&
#39
repeat-y&
#39

 

}else
{ 

dGradient 
= 
p_dCtx.createLinearGradient(0,0,0,nH)
 

sRepeat 
= 
&
#39
repeat-x&
#39

 

} 


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(&
#39
image/png&
#39
)
 


with(dEl.style)
{ 

backgroundRepeat 
= 
sRepeat
 

backgroundImage 
= 
&
#39
url(&
#39
 
+ 
sDataUrl 
+ 
&
#39
)&
#39

 

backgroundColor 
= 
sColor2
 

}
 

} 

}else 
if(p_isIE)
{ 


p_dCanvas 
= 
p_useCanvas 
= 
p_dCtx 
= 
null
 

return 
function 
(dEl 
, 
sColor1 
, 
sColor2 
, 
bRepeatY)
{ 

if(typeof(dEl) 
== 
&
#39
string&
#39
) 
dEl 
= 
document.getElementById(dEl)
 

if(!dEl) 
return 
false
 

dEl.style.zoom 
= 
1
 

var 
sF 
= 
dEl.currentStyle.filter
 

dEl.style.filter 
+= 
&
#39
 
&
#39
 
+ 
[&
#39
progid:DXImageTransform.Microsoft.gradient( 
GradientType=&
#39
, 
+(!!bRepeatY 
),&
#39
,enabled=true,startColorstr=&
#39
,sColor1,&
#39
, 
endColorstr=&
#39
,sColor2,&
#39
)&
#39
].join(&
#39
&
#39
)
 


}
 


}else
{ 


p_dCanvas 
= 
p_useCanvas 
= 
p_dCtx 
= 
null
 

return 
function(dEl 
, 
sColor1 
, 
sColor2 
)
{ 


if(typeof(dEl) 
== 
&
#39
string&
#39
) 
dEl 
= 
document.getElementById(dEl)
 

if(!dEl) 
return 
false
 

with(dEl.style)
{ 

backgroundColor 
= 
sColor2
 

}
 

//alert(&
#39
your 
browser 
does 
not 
support 
gradient 
effet&
#39
)
 

} 

} 

})()
 


<
/script>
 



<
style>
 

body
{font:0.75em/1.4 
Arial
text-align:left
margin:20px
} 

hr
{clear:both
visibility:hidden
} 

xmp
{font:12px/12px 
"
Courier 
New"

background:
#fff
color:
#666
 
border:solid 
1px 

#ccc
} 

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:justify
} 

<
/style>
 


<
body>
 


<
h1>
渐变背景-beta1<
/h1>
 

<
h4>
IE6,IE7,FF2测试通过.<
/h4>
 



<
div 
id="
example1"
 
class="
example"
>
 

Lorem 
ipsum 
dolor 
sit 
amet, 
consectetuer 
adipiscing 
elit. 
Aliquam 
blandit 
nunc 
lobortis 
diam 
bibendum 
semper. 
Nunc 
aliquam 
aliquam 
mi. 
Maecenas 
porttitor, 
lorem 
sed 
mattis 
ultrices, 
lorem 
risus 
consequat 
mi, 
vitae 
ullamcorper 
leo 
ipsum 
in 
tellus. 
Pellentesque 
arcu 
est, 
sollicitudin 
sed, 
ultricies 
quis, 
vestibulum 
a, 
neque. 
Duis 
massa 
elit, 
gravida 
vel, 
lacinia 
eu, 
pretium 
eget, 
ipsum. 
Etiam 
magna 
urna, 
ultrices 
ut, 
eu 
<
/div>
 


<
div 
id="
example2"
 
class="
example"
>
 

Lorem 
ipsum 
dolor 
sit 
amet, 
consectetuer 
adipiscing 
elit. 
Aliquam 
blandit 
nunc 
lobortis 
diam 
bibendum 
semper. 
Nunc 
aliquam 
aliquam 
mi. 
Maecenas 
porttitor, 
lorem 
sed 
mattis 
ultrices, 
lorem 
risus 
consequat 
mi, 
vitae 
ullamcorper 
leo 
ipsum 
in 
tellus. 
Pellentesque 
arcu 
est, 
sollicitudin 
sed, 
ultricies 
quis, 
vestibulum 
a, 
neque. 
Duis 
massa 
elit, 
gravida 
vel, 
lacinia 
eu, 
pretiu 
<
/div>