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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
May 13 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
简述Angular 5 快速入门
Nov 04 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
php入门教程 精简版
2009/12/13 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python实现的密码强度检测器示例
2017/08/23 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Python API自动化框架总结
2019/11/12 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python reversed函数及使用方法解析
2020/03/17 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
学校课外活动总结
2014/05/08 职场文书
中小学校园安全广播稿
2014/09/29 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
清明扫墓感想
2015/08/11 职场文书