渐变背景(跨平台的javascript实现)

来源：互联网发布：hadoop java home 编辑：程序博客网时间：2024/05/22 02:20

<!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=gbk">
<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;
    //cc_on 这个东西加上他两边的东西是有用的，但是不知道是干什么用的
    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>

<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:justify;}
</style>

<body>
<h1>渐变背景-beta1</h1>
<h4>IE6,IE7,FF2测试通过.</h4>
<div id="example1" class="example"></div>
<div id="example2" class="example"> </div>
<div id="example3" class="example">fdsafdsafdsaf </div>
<div id="example4" class="example">fdsafdsafdsafdsa </div>
<div id="example5" class="example"> </div>
<div id="example6" class="example"> </div>
<script>
setGradient('example1','#4ddbbe','#d449cc',1);
setGradient('example2','#46ddbd','#d8b617',0);
setGradient('example3','#c81fc1','#bf445f',1);
setGradient('example4','#2285e5','#d769eb',0);
setGradient('example5','#8b4286','#eac87d',1);
setGradient('example6','black','white',0);
</script>

</body>
</html>