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中scrollTop()方法用法实例
Jan 16 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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+SqlServer实现分页显示
2006/10/09 PHP
php 判断数组是几维数组
2013/03/20 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
理解JS绑定事件
2016/01/19 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
Python类属性的延迟计算
2016/10/22 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Django celery异步任务实现代码示例
2020/11/26 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
2014年党课学习心得体会
2014/07/08 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
升职自荐信范文
2015/03/27 职场文书
react中的DOM操作实现
2021/06/30 Javascript