Javascript + CSS-implemented pretty gradient background Effects code (6 gradient effects) _ javascript tips-JS tutorial

This article mainly introduces the special effects on the beautiful gradient background implemented by JS + CSS, including six gradient effects, involving JavaScript related techniques for dynamic operations on page element attributes, for more information, see the example in this article to describe the special effects on the beautiful gradient background implemented by JS + CSS. We will share this with you for your reference. The details are as follows:

The running effect is as follows:

The Code is as follows:

      Six examples of pretty gradient background effects implemented by JS with CSSScript 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_dCt X. 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. getElementByI D (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          
CSS special effect code.
      
Various programming source code,
      
High-quality software
      
Shanghai World Expo
      
My home is Tiananmen, Beijing
      
Welcome to Beijing!
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