js实现颜色渐变
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
上面是c3的实现方法,但是现在对c3的支持不是很好,所以只有通过其他的方式来实现。
下面则是用js来实现
var setGradient = (function() {
//private variables;
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;
//test if toDataURL() is supported by Canvas since Safari may not support it
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;
// Create gradients
if(bRepeatY) {
dGradient = p_dCtx.createLinearGradient(, , nW, );
sRepeat = 'repeat-y';
} else {
dGradient = p_dCtx.createLinearGradient(, , , nH);
sRepeat = 'repeat-x';
}
dGradient.addColorStop(, sColor1);
dGradient.addColorStop(, sColor2);
p_dCtx.fillStyle = dGradient;
p_dCtx.fillRect(, , 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 = ;
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;
};
//alert('your browser does not support gradient effet');
}
}
})(); setGradient('nth2', '#012D5E', '#07779D', );
第一个参数是容器名(id)接下来则是起始颜色和结束颜色,最后1代表从左到右 0表示从上到下
js实现颜色渐变的更多相关文章
- CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...
- 颜色渐变的JS代码
今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! <!DOCTYPE html> ...
- jQuery 小特效【文本框折叠隐藏,展开显示】【下拉菜单】【颜色渐变】【弹窗+遮罩】
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- 第四界css大会 黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
- CSS3颜色渐变模式
1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
- 【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
- IOS导航栏颜色渐变与常用属性
(转:http://www.cnblogs.com/Lingchen-start/archive/2015/10/23/4904361.html) 今年很忙,忙的写日志的时间都很少. 少的可怜. 自 ...
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
随机推荐
- Docker Swarm nginx 集群搭建
环境1: 系统:Linux Centos 7.4 x64 内核:Linux docker 3.10.0-693.2.2.el7.x86_64 Docker 版本:18.09.1 redis 版本:ng ...
- Docker Kubernetes 创建管理 Deployment
Docker Kubernetes YAML文件创建容器 通过创建Deployment来管理pods从而创建容器.它会同时创建容器.pod.以及Deployment ! 环境: 系统:Centos 7 ...
- opencv学习之路(27)、轮廓查找与绘制(六)——外接圆、椭圆拟合、逼近多边形曲线、计算轮廓面积及长度、提取不规则轮廓
一.最小外接圆 #include "opencv2/opencv.hpp" #include<iostream> using namespace std; using ...
- .Net 读取配置文件 xml
直接解析XML文件 1.System.Xml.Linq命名空间下提供可以使用linq查询的类,使用linq to xml读取也很方便. 2.还可以使用System.Xml.Serialization类 ...
- 【搬运】Wget 命令详解
用过 Linux 系统的对于 wget 不陌生吧,从网上下载资源等操作都是少不了它,它体积小但功能集全,支持 FTP HTTP HTTPS 协议下载方式,支持断点续传 代理服务器. 现在 Window ...
- leecode第一百四十六题(LRU缓存机制)
class LRUCache { private: unordered_map<int, list<pair<int,int>>::iterator> _m; // ...
- 19 中山重现赛 1002 triangle
题意:给一组数据a[0]...a[n], n<5e6, a[i]<2^31-1(1e9)判断是否存在三角形数 首先想到的是排序,若a[i]+a[i+1]>a[i+2] , 则存在三 ...
- 第 8 章 容器网络 - 065 - 容器在 Weave 中如何通信和隔离?
首先在host2 执行如下命令: weave launch 10.12.31.22 这里必须指定 host1 的 IP 10.12.31.22,这样 host1 和 host2 才能加入到同一个 we ...
- MDK编译过程
原博文:https://blog.csdn.net/qq_33894122/article/details/83994564
- 虚拟机里C盘空间不够 用Macrium Reflect工具克隆
一个很重要的虚拟机,因为需要装slack, 进而需要装 .NET4.5 , 结果发觉C盘不够了. 只好重新添加了一个80G的虚拟硬盘,然后用 Macrium Reflect工具把原来的C盘和引导分区, ...