JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)


Posted in Javascript onMarch 25, 2016

本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考,具体如下:

运行效果截图如下:

JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

具体代码如下:

<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 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
让IE8支持DOM 2(不用框架!)
Dec 31 Javascript
jquery easyui combobox模糊过滤(示例代码)
Nov 30 Javascript
Express.JS使用详解
Jul 17 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
基于angular实现树形二级表格
Oct 16 Javascript
详解Javascript继承的实现
Mar 25 #Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
Mar 25 #Javascript
JavaScript修改作用域外变量的方法
Mar 25 #Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 #Javascript
JavaScript入门系列之知识点总结
Mar 24 #Javascript
JS实现支持Ajax验证的表单插件
Mar 24 #Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
PHP配置文件php.ini中打开错误报告的设置方法
2015/01/09 PHP
JS实现的简易拖放效果示例
2016/12/29 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
Promise扫盲贴
2019/06/24 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python扫描线填充算法详解
2020/02/19 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
通信生自我鉴定
2014/01/18 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
代理协议书
2014/04/22 职场文书
酒后驾车标语
2014/06/30 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
python 学习GCN图卷积神经网络
2022/05/11 Python