www.qjdy.com-奇迹赌场 > www.qjdy.com > 具体代码如下

原标题:具体代码如下

浏览次数:157 时间:2019-07-11

本文实例陈述了JS CSS完毕的雅观渐变背景特效代码。分享给大家供我们参谋,具体如下:

运作效果截图如下:

图片 1

切切实实代码如下:

<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 ? 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>

越多关于JavaScript相关内容感兴趣的读者可查看本站专项论题:《JavaScript查找算法手艺总计》、《JavaScript动画特效与本领汇总》、《JavaScript错误与调度手艺计算》、《JavaScript数据结构与算法技能计算》、《JavaScript遍历算法与本领总计》及《JavaScript数学生运动算用法总计》

指望本文所述对大家JavaScript程序设计有着帮忙。

你或然感兴趣的稿子:

  • 玄妙!js CSS DIV完结文字颜色渐变效果
  • js达成按键颜色渐变动画功用
  • js HTML5兑现canvas各种颜色渐变效果的办法
  • javascript落到实处颜色渐变的主意
  • Javascript 颜色渐变效果的贯彻代码
  • JavaScript 颜色梯度和听得多了就能说的详细效果
  • JS Tween 颜色渐变
  • 选拔递增的数字重回循环渐变的水彩的js代码
  • JS达成点击登陆弹出窗口同一时候背景象渐变动画功效
  • JS完成响应鼠标点击动画渐变弹出层效果代码
  • JS CSS达成鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
  • JavaScript落到实处弹出DIV层同期页面背景渐变成半透明效果
  • JS完成的水彩实时渐变效果总体实例

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:具体代码如下

关键词: www.4355.mg线

上一篇:本文实例讲述了jQuery实现的精美平滑二级下拉菜

下一篇:没有了