Jquery中文网 > 脚本编程 > javascript > 正文兼容性超强颜色渐变效果

兼容性超强颜色渐变效果

发布时间：2016-12-26 编辑：www.jquerycn.cn

jquery中文网为您提供兼容性超强颜色渐变效果等资源，欢迎您收藏本站，我们将为您提供最新的兼容性超强颜色渐变效果资源

文章介绍的这个关于颜色渐变效果,是一个通用的可兼容所有浏览器的代码，有需要的朋友可以测试一下下哦。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" ><script> var setGradient = (function(){ //private variables; 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; //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>

渐变色

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
兼容性超强颜色渐变效果
 CSS3 - 设置渐变颜色背景，线性/放射性/循环（附在线渐变生成工具）
Illustrator如何调渐变颜色调渐变颜色方法分享
 canvas渐变色：canvas如何实现渐变色的效果？
html5 Canvas实现画未闭合的路径及渐变色的填充方法
 Photoshop快速制作一个有渐层颜色覆盖的背景教程
 photoshop利用渐变工具制作立体石膏球教程
 Illustrator绘制有型有色的抽象派玫瑰花教程分享
 CSS+Jquery实现页面圆角框方法大全
 photoshop利用渐变映射快速调出欧美色后期处理教程

上一篇：javascript网页加载进度条实现代码下一篇：简单的网页中禁用右键js代码

[关闭]

兼容性超强颜色渐变效果

最近更新

浏览排行