Kod kesan khas latar belakang kecerunan yang cantik dilaksanakan oleh JS+CSS (6 kesan kecerunan)

Kod kesan khas latar belakang kecerunan yang cantik dilaksanakan oleh JS+CSS (6 kesan kecerunan)_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:08:18

asal

1715 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod kesan khas latar belakang kecerunan yang indah yang dilaksanakan oleh JS+CSS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut:

<html>
  <head>
    <title>
      JS配合CSS实现的漂亮渐变背景特效6个实例
    </title>
    <script>
      var setGradient = (function() {
        var p_dCanvas = document.createElement('canvas');
        var p_useCanvas = !!(typeof(p_dCanvas.getContext) == 'function');
        var p_dCtx = p_useCanvas &#63; 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">
        CSS特效代码。
      </div>
      <div id="example2" class="example">
        各类编程源码、
      </div>
      <div id="example3" class="example">
        精品软件
      </div>
      <div id="example4" class="example">
        上海世博园
      </div>
      <div id="example5" class="example">
        我家北京天安门
      </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>

Salin selepas log masuk

Pembaca yang berminat dengan lebih banyak kandungan berkaitan JavaScript boleh menyemak topik khas di tapak ini: "Ringkasan teknik algoritma carian JavaScript", "Ringkasan kesan dan teknik khas animasi JavaScript ", "Ringkasan ralat JavaScript dan teknik penyahpepijatan", "Ringkasan struktur data JavaScript dan teknik algoritma", "Ringkasan algoritma dan teknik traversal JavaScript" dan "Ringkasan Matematik JavaScript bagi penggunaan operasi》

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.