html怎么设计开场渐变效果图,JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)...

本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

JS配合CSS实现的漂亮渐变背景特效6个实例

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;

};

}

}

})();

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;}

CSS特效代码。

各类编程源码、

精品软件

上海世博园

我家北京天安门

北京欢迎您！

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);

希望本文所述对大家JavaScript程序设计有所帮助。