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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
js布局实现单选按钮控件
Jan 17 Javascript
Angular处理未可知异常错误的方法详解
Jan 17 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
西德产收音机
2021/03/01 无线电
Banner程序
2006/10/09 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
实例讲解php数据访问
2016/05/09 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
原生JS实现前端本地文件上传
2018/09/08 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python模块常用用法实例详解
2019/10/17 Python
keras之权重初始化方式
2020/05/21 Python
基于python实现计算两组数据P值
2020/07/10 Python
墨西哥网上超市:Superama
2018/07/10 全球购物
Silk Therapeutics官网:清洁、抗衰老护肤品
2020/08/12 全球购物
求职推荐信
2013/10/28 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
主题实践活动总结
2014/05/08 职场文书
撤诉状格式范本
2015/05/19 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
idea下配置tomcat避坑详解
2022/04/12 Servers
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript