软件开发培训班 >> 编程开发 >> JavaScript

CSS 渐变背景的6个演示代码

　　本文标签：CSS,渐变背景

<!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>CSS渐变背景</title> 
<script> 
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> 
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> 
<div id="example1" class="example">脚本之家（jb51.net）提供JavaScript/CSS特效代码 。</div> 
<div id="example2" class="example">脚本之家各类编程源码、 </div> 
<div id="example3" class="example">提供各类编程源码</div> 
<div id="example4" class="example">脚本之家（jb51.net） </div> 
<div id="example5" class="example">jb51.net </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>

技术文章快速查找

js onkeypress与onkeydown 事件区别详细说明

jquery $.ajax相关用法分享

ASP.NET jQuery 实例10 动态修改hyperlink的URL值

javascript 必知必会之closure

可恶的ie8提示缺少id未定义

JavaScript中的私有/静态属性介绍

js中substring和substr的详细介绍与用法

jQuery作为“JavaScript库MVP”的12大理由

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建