Javascript如何做渐变效果,求个源码.谢谢

Question

如题 :oops: 字数不够 :x 还是不够:shock: 字数够了吧 :D

Answer 1

引用http://blog.csdn.net/nhconch/archive/2008/07/30/2739733.aspx
用JS实现渐变效果，兼容各款浏览器
以 住做B/S的系统都是以IE浏览器为主，基本上忽略其他的浏览器，这次决定来个大兼容，但在实现背景渐变上就是个大麻烦。本想用图片来实现的，但要兼顾多 种分辨率实在不好办，最后在网上找到一个Javascript的实现办法，兼容IE6/7、FF、Safari等，相当完美。好东西不敢独占，贴出来大家 共享：

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'); } } })();

//调用方式：

setGradient('example1','#4ddbbe','#d449cc',1); setGradient(document.body, '#629be2','#333ebe',0);