'javaScript' 카테고리의 글 목록

Dynamic Gradient Background

javaScript 2009. 3. 6. 11:06

http://miniwini.com/miniwinis/bbs/index.php?bid=share&mode=read&id=7707

<script type="text/javascript" language="JavaScript">
// ⓒ http://www.hedgerwow.com/360/dhtml/dom-gradient-background/demo.php
var setGradient=(function(){var p_dCanvas=document.createElement("canvas");var p_useCanvas=!!(typeof (p_dCanvas.getContext)=="function");var p_dCtx=p_useCanvas?p_dCanvas.getContext("2d"):null;var p_isIE=
/*@cc_on!@*/
false;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;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;}};}}})();
</script>

<style type="text/css" media="all">
div {width:700px; font:11px 굴림;}
div strong {display:block; margin-bottom:5px;}

#dGradient1 {color:#333; border-top:1px solid #ccc; padding:8px;}
#dGradient2 {color:#333; border:1px solid #ebe3be; padding:8px;}
#dGradient3 {color:#333; border-top:3px solid #c4e3ff; border-bottom:1px solid #c4e3ff; padding:8px;}
#dGradient4 {color:#1e4367; border:1px solid #b6cde3; padding:8px;}
#dGradient5 {color:#cd4224; border-top:2px solid #ebefc2; border-bottom:1px solid #ebefc2; padding:8px;}
#dGradient6 {color:#000; border-top:2px solid #ccdc70; border-bottom:1px solid #ccdc70; padding:8px;}
#dGradient7 {color:#000; border:1px solid #dddac3; padding:8px;}
#dGradient8 {color:#fff; border-top:2px solid #CC4402; padding:8px;}
#dGradient9 {color:#000; border-top:2px solid #E8E8FF; border-bottom:1px solid #E8E8FF; padding:8px;}
#dGradient10 {color:#eee; border-top:2px solid #000; padding:8px;}

#dGradient11 {color:#777; border:1px solid #fff; padding:8px;}
</style>

<body>

<script type="text/javascript" language="JavaScript">
for(i=1;i<=10;i++){
document.write("<div id='dGradient"+i+"'><strong>SAMPLE "+i+"</strong>In vector calculus, the gradient of a scalar field is a vector field which points in the direction of the greatest rate of increase of the scalar field, and whose magnitude is the greatest rate of change.<br /><br />A generalization of the gradient for functions on a Euclidean space which have values in another Euclidean space is the Jacobian. A further generalization for a function from one Banach space to another is the Frechet derivative.<br /></div><br />");
}
</script>

<div style="border:1px solid #e0e1db;">
<div id="dGradient11">
<strong>SAMPLE 11</strong>
In vector calculus, the gradient of a scalar field is a vector field which points in the direction of the greatest rate of increase of the scalar field, and whose magnitude is the greatest rate of change.<br /><br />A generalization of the gradient for functions on a Euclidean space which have values in another Euclidean space is the Jacobian. A further generalization for a function from one Banach space to another is the Frechet derivative.<br /><br /><br />A generalization of the gradient for functions on a Euclidean space which have values in another Euclidean space is the Jacobian. A further generalization for a function from one Banach space to another is the Frechet derivative.<br /><br /><br />A generalization of the gradient for functions on a Euclidean space which have values in another Euclidean space is the Jacobian. A further generalization for a function from one Banach space to another is the Frechet derivative.<br /></div>
</div>

<br /><br /><br /><br />

<script type="text/javascript" language="JavaScript">
// id, color1, color2, 각도 0(90도) or 1(180도)
setGradient('dGradient1','#f5f5f5','#ffffff',0);
setGradient('dGradient2','#fffbe6','#fff5c5',0);
setGradient('dGradient3','#f5faff','#e8f4ff',0);
setGradient('dGradient4','#e9eff5','#cfdeeb',0);
setGradient('dGradient5','#fbffc4','#feffec',0);
setGradient('dGradient6','#d7e38d','#ebf1c9',0);
setGradient('dGradient7','#edece0','#d6d3b8',0);
setGradient('dGradient8','#e14a02','#fd5d11',0);
setGradient('dGradient9','#eeeeff','#f8f8ff',0);
setGradient('dGradient10','#555555','#999999',0);

setGradient('dGradient11','#f9f9d7','#fefef2',0);

</script>