javascript线性渐变一- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript线性渐变一

Javascript: jquery 操作单选框，复选框，下拉列表实现代码; js 数组实现一个类似ruby的迭代器; JavaScript 组件之旅（一）分析和设计; JavaScript 组件之旅（二）编码实现和算法; JavaScript 组件之旅（三）：用 Ant 构建组件; JavaScript 组件之旅（四）：测试 JavaScript 组件; 小议javascript 设计模式推荐; 浅谈javascript 面向对象编程; javascript 时间比较实现代码; js apply/call/caller/callee/bind使用方法与区别分析; JavaScript 全角转半角部分; jquery 选择器部分整理; Firebug 字幕文件JSON地址获取代码; jQuery 判断元素上是否绑定了事件; javascript实现的距离现在多长时间后的一个格式化的日期; javascript 面向对象,实现namespace,class,继承，重载; javascript 通过封装div方式弹出div窗体; JScript 脚本实现文件下载一般用于下载木马; JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布; 网页禁用右键实现代码（JavaScript代码）

No. « ‹ 268 269 270 271 › »

技术文章搜索

关键字

Javascript 中的 javascript线性渐变一

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 73 ::

收藏到网摘: n/a

JavaScript Array扩展实现代码 javascript 线性渐变二

javascript在处理图像的能力其实是不弱的，可惜浏览器大战连累了它，这还不算，Adobe 收购Macromedia更让SVG处于怠工状态。作为新力军，苹果为我们带来了canvas标签。canvas首次在Mac OS X中的Dashboard中被引入，之后又被苹果公司的Safari浏览器所支持，紧接着就成为HTML5的标准，被IE内核以外的标准浏览器所支持。苹果做的好事还不止这一桩，它认为SVG太笨重了，于是它把SVG里的滤镜标签统统CSS属性化（SVG的滤镜比IE滤镜还多呢，而且功能更全面）。firefox一看不对劲，连忙自己也搞一套私有属性，只不过是前缀由-webkit-改为-moz-罢了。opera的反应比较呆滞，应该说私底下非常不满，因为opera的CTO就是CSS的发明者Hakon Wium Lie，不喜欢别人对自己的东西啥搞。因此我实现线性渐变就困难重重了，IE需要用IE滤镜，firefox在动态创建SVG存在一些问题，需要用其-moz-前缀的CSS私有属性，safari与chrome需要用-webkit-前缀的CSS私有属性，opera需要用SVG。现在一个个突破吧。
IE要用到DXImageTransform.Microsoft.Gradient滤镜（最后那个Gradient的首字母大写小写无所谓）。

属性	说明
enabled	是否启用滤镜，默认为true
gradientType	是垂直渐变还是水平渐变，默认是0(垂直渐变)，1为水平渐变
startColorStr	起始颜色，能接受一个8位hex颜色值，从#FF000000到#FFFFFFFF，默认是蓝色#FF0000F；或者使用red,green等颜色值F
endColorStr	结束颜色，能接受一个8位hex颜色值，从#FF000000到#FFFFFFFF，默认是黑色#FF000000
startColor	作用同startColorStr，接受一个0到4294967295整体颜色值，没有默认值
endColor	作用同endColorStr，接受一个0到4294967295整体颜色值，没有默认值

<!doctype html>
<title>javascript线性渐变 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript线性渐变 by 司徒正美" />
<meta name="description" content="javascript线性渐变 by 司徒正美" />
<style type="text/css">
#gradient{
height:120px;
color:navy;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',gradientType=1,startColorstr=#ffff0000, endColorstr=#00ffffff);
}
</style>
<script type="text/javascript">
window.onload = function(){
var div = document.getElementById("gradient"),
button = document.getElementById("toggle"),
filter = div.filters[0];
//因为它只应用到一个滤镜。由此也可见，filters是作为元素对象的一个属性而存在，
//此属性是一个集合，里面是静态CSS定义过的滤镜与动态添加过的滤镜。
//如果不止一个滤镜，我就要使用如下方式取得相应的滤镜对象
//filter = div.filters["DXImageTransform.Microsoft.Gradient"]
filter = div.filters.item("DXImageTransform.Microsoft.Gradient")
button.onclick = function(){
if(filter.enabled){
filter.enabled = "false";
div.style.color = "navy";
button.innerHTML = "启用滤镜";
}else{
filter.enabled = "true";
div.style.color = "#000";
button.innerHTML = "禁用滤镜";
}
}
}
</script>
<div id="gradient">javascript线性渐变 by 司徒正美</div>
<button type="button" id="toggle">启用IE滤镜</button>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

接着讲述一下SVG线性渐变的实现，因为相关的CSS私有属性都衍生于此。由于没有什么空间支持上传SVG，我只能动态生成SVG了。对我来说，能动态实现最好不过了，起码能减少请求数，少写许多大于号小于号……下面是静态实现，至于怎样加入html自己google吧。
linearGradient 有x1,x2,y1,y2等几个属性，可以帮助我们实现水平渐变或垂直渐变。我们大可以把x1,x2,y2,y2当成颜色渐变体的两个点的坐标就是。
当y1等于y2，x1不等于x2，实现水平渐变。
当x1等于x2，y1不等于y2，实现垂直渐变。
当y1不等于y2，x1不等于x2，实现角度渐变。

复制代码代码如下:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="800px" height="400px" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 
<desc>javascript线性渐变（水平） by 司徒正美</desc> 
<defs> 
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> 
<stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/> 
<stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/> 
</linearGradient> 
</defs> 
<ellipse cx="200" cy="190" rx="85" ry="55" fill="url(#gradient)"/> 
</svg>

<!doctype html>
<title>svg by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript动态创建SVG" />
<meta name="description" content="javascript动态创建SVG" />
<base href="http://www.ruanchen.com">
<script type="text/javascript">
(function(){
if(!window.svg){
window.svg = {};
}
var svg = window.svg = {
create : function(name){
this.node = document.createElementNS("http://www.w3.org/2000/svg", name);
return this;
},
appendTo: function(parent){
if(typeof this.node !== "undefined" && parent.nodeType == 1){
parent.appendChild(this.node);
}
return this;
},
attr : function(bag){
for(var i in bag){
if(bag.hasOwnProperty(i)){
this.node.setAttributeNS(null,i,bag[i])
}
}
return this;
},
html : function(text){
if(text.nodeType == 3){
this.node.appendChild(document.createTextNode(text));
}
return this;
}
}
})()
window.onload = function(){
var root = svg.create("svg").attr({width:"800px",height:"400px"}).appendTo(document.body).node;
svg.create("desc").html("javascript线性渐变 by 司徒正美").appendTo(root);
var defs = svg.create("defs").appendTo(root).node;
//定义线性渐变
var linearGradient = svg.create("linearGradient").attr({id:"gradient",x1:"0%", y1:"0%",x2:"100%",y2:"0%"}).appendTo(defs).node;
svg.create("stop").attr({offset:"20%","stop-color":"red"}).appendTo(linearGradient)
svg.create("stop").attr({offset:"80%","stop-color":"yellow"}).appendTo(linearGradient)
svg.create("ellipse").attr({cx:"200",cy:"190",rx:"85", ry:"55",fill:"url(#gradient)" }).appendTo(root)
}
</script>
<h3>javascript线性渐变（水平） by 司徒正美</h3>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

动态实现，不过在火狐中哑火了，可见火狐在SVG上也怠工了。

复制代码代码如下:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="800px" height="400px" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 
<desc>javascript线性渐变（垂直） by 司徒正美</desc> 
<defs> 
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> 
<stop offset="0%" stop-color="#008000" stop-opacity="1"/> 
<stop offset="80%" stop-color="#a9ea00" stop-opacity="0"/> 
</linearGradient> 
</defs> 
<polygon id = "s1" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/> 
</svg>

<!doctype html>
<title>svg by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript动态创建SVG" />
<meta name="description" content="javascript动态创建SVG" />
<base href="http://www.ruanchen.com">
<script type="text/javascript">
(function(){
if(!window.svg){
window.svg = {};
}
var svg = window.svg = {
create : function(name){
this.node = document.createElementNS("http://www.w3.org/2000/svg", name);
return this;
},
appendTo: function(parent){
if(typeof this.node !== "undefined" && parent.nodeType == 1){
parent.appendChild(this.node);
}
return this;
},
attr : function(bag){
for(var i in bag){
if(bag.hasOwnProperty(i)){
this.node.setAttributeNS(null,i,bag[i])
}
}
return this;
},
html : function(text){
if(text.nodeType == 3){
this.node.appendChild(document.createTextNode(text));
}
return this;
}
}
})()
window.onload = function(){
var root = svg.create("svg").attr({width:"800px",height:"400px"}).appendTo(document.body).node;
svg.create("desc").html("javascript线性渐变 by 司徒正美").appendTo(root);
var defs = svg.create("defs").appendTo(root).node;
//定义线性渐变
var linearGradient = svg.create("linearGradient").attr({id:"gradient",x1:"0%", y1:"0%",x2:"0%",y2:"100%"}).appendTo(defs).node;
svg.create("stop").attr({offset:"0%","stop-color":"#008000"}).appendTo(linearGradient)
svg.create("stop").attr({offset:"80%","stop-color":"#a9ea00"}).appendTo(linearGradient)
svg.create("polygon").attr({points:"60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60",fill:"url(#gradient)"}).appendTo(root)
}
</script>
<h3>javascript线性渐变(垂直) by 司徒正美</h3>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

复制代码代码如下:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="800px" height="400px" 
xmlns="http://www.w3.org/2000/svg" version="1.1"> 
<desc>javascript线性渐变(角度) by 司徒正美</desc> 
<defs> 
<linearGradient id="content" x1="0%" y1="0%" x2="100%" y2="100%"> 
<stop stop-color="black" offset="0%"/> 
<stop stop-color="teal" offset="50%"/> 
<stop stop-color="white" offset="100%"/> 
</linearGradient> 
</defs> 
<rect x="10px" y="10px" width="350" height="350" fill="url(#content)"/> 
</svg>

<!doctype html>
<title>svg by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript动态创建SVG" />
<meta name="description" content="javascript动态创建SVG" />
<base href="http://www.ruanchen.com">
<script type="text/javascript">
(function(){
if(!window.svg){
window.svg={};
}
var svg=window.svg={
create : function(name){
this.node=document.createElementNS("http://www.w3.org/2000/svg", name);
return this;
},
appendTo: function(parent){
if(typeof this.node !== "undefined" && parent.nodeType == 1){
parent.appendChild(this.node);
}
return this;
},
attr : function(bag){
for(var i in bag){
if(bag.hasOwnProperty(i)){
this.node.setAttributeNS(null,i,bag[i])
}
}
return this;
},
html : function(text){
if(text.nodeType == 3){
this.node.appendChild(document.createTextNode(text));
}
return this;
}
}
})()
window.onload=function(){
var root= svg.create("svg").attr({width:"800px",height:"400px"}).appendTo(document.body).node;
svg.create("desc").html("javascript线性渐变 by 司徒正美").appendTo(root);
var defs= svg.create("defs").appendTo(root).node;
//定义线性渐变
var linearGradient= svg.create("linearGradient").attr({id:"centent",x1:"0%", y1:"0%",x2:"100%",y2:"100%"}).appendTo(defs).node;
svg.create("stop").attr({offset:"0%","stop-color":"black"}).appendTo(linearGradient)
svg.create("stop").attr({offset:"50%","stop-color":"teal"}).appendTo(linearGradient)
svg.create("stop").attr({offset:"100%","stop-color":"white"}).appendTo(linearGradient)
svg.create("rect").attr({x:"10px",y:"10px",width:"300px",height:"300px",fill:"url(#centent)"}).appendTo(root);
}
</script>
<h3>javascript线性渐变(角度) by 司徒正美</h3>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

接着说说-moz-linear-gradient，火狐的CSS私有属性，隶属于background-image，不过它也略写成background。语法为：
-moz-linear-gradient( <POINT>, <POINT> [, <STOP>]* )
我们可以设置这两个点的值坪决定其是水平还是垂直，如
/*水平*/
-moz-linear-gradient(left, right [, <STOP>]* )1.
/*垂直*/
-moz-linear-gradient(top, bottom [, <STOP>]* )
至于后面的部分，看看下面的运行框就足够了。不过这要用最新版的firefox(3.6a1)才能见效果。

<!doctype html>
<title>javascript线性渐变 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript线性渐变 by 司徒正美" />
<meta name="description" content="javascript线性渐变 by 司徒正美" />
<base href="http://www.ruanchen.com">
<style type="text/css">
.vertical {
background-image: -moz-linear-gradient(top, bottom,
from(red),/*起始颜色*/
color-stop(16%, orange),/*到高的16%的位置时渐变为橙色*/
color-stop(32%, yellow),/*到高的32%的位置时渐变为黄色*/
color-stop(48%, green),/*到高的48%的位置时渐变为绿色*/
color-stop(64%, blue),/*到高的64%的位置时渐变为蓝色*/
color-stop(80%, indigo),/*到高的80%的位置时渐变为紫蓝色*/
to(violet));/*结束颜色*/
height:100px;
}
.horizontal {
background-image: -moz-linear-gradient(left, right,
from(red),/*起始颜色*/
color-stop(16%, orange),/*到高的16%的位置时渐变为橙色*/
color-stop(32%, yellow),/*到高的32%的位置时渐变为黄色*/
color-stop(48%, green),/*到高的48%的位置时渐变为绿色*/
color-stop(64%, blue),/*到高的64%的位置时渐变为蓝色*/
color-stop(80%, indigo),/*到高的80%的位置时渐变为紫蓝色*/
to(violet));/*结束颜色*/
height:100px;
}
.angular {
background-image: -moz-linear-gradient(0px 0px, 100px 100px,
from(red),/*起始颜色*/
color-stop(16%, orange),/*到高的16%的位置时渐变为橙色*/
color-stop(32%, yellow),/*到高的32%的位置时渐变为黄色*/
color-stop(48%, green),/*到高的48%的位置时渐变为绿色*/
color-stop(64%, blue),/*到高的64%的位置时渐变为蓝色*/
color-stop(80%, indigo),/*到高的80%的位置时渐变为紫蓝色*/
to(violet));/*结束颜色*/
height:100px;
}
</style>
<h3 class="vertical ">记得要用最新版本的firefox运行。</h3>
<div class="horizontal">上面是垂直渐变，这里是水平渐变。</div>
<div class="angular">角度渐变</div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

接着下来看看-webkit-gradient这个CSS属性，用法来-moz-linear-gradient差不多，但有三点不同。第一个参数用来决定是线性渐变与放射性渐变，这里写linear就可以了。两个点值，一定要为left,right,top与bottom的两个，而且怎样组合也实现不了角度渐变。三是color-stop的偏移量一定为小数。

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

结语，这就是多种浏览器共存的带来的和谐局面，我宁愿IE实现完全垄断了。下一部分才是征途的开始，光IE处理滤镜失效的问题，就要动用table这个上古神器了。SVG，在上面的运框中，你们看到了，我还特意搞了一个小工具来创建这些特殊的对象……

JavaScript Array扩展实现代码 javascript 线性渐变二

Javascript 中的 javascript线性渐变一

评论 (0) All