作为新力军，苹果为我们带来了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整体颜色值，没有默认值 javascript线性渐变 by 司徒正美 #gradient{ height:120px; color:navy; filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',gradientType=1,startColorstr=#ffff0000, endColorstr=#00ffffff); } javascript线性渐变 by 司徒正美 启用IE滤镜 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]接着讲述一下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> svg by 司徒正美 javascript线性渐变（水平） by 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]动态实现，不过在火狐中哑火了，可见火狐在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> svg by 司徒正美 javascript线性渐变(垂直) by 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]复制代码 代码如下:<?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> svg by 司徒正美 javascript线性渐变(角度) by 司徒正美 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]接着说说-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)才能见效果。 javascript线性渐变 by 司徒正美 .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; } 记得要用最新版本的firefox运行。 上面是垂直渐变，这里是水平渐变。 角度渐变 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]接着下来看看-webkit-gradient这个CSS属性，用法来-moz-linear-gradient差不多，但有三点不同。第一个参数用来决定是线性渐变与放射性渐变，这里写linear就可以了。两个点值，一定要为left,right,top与bottom的两个，而且怎样组合也实现不了角度渐变。三是color-stop的偏移量一定为小数。 javascript线性渐变 by 司徒正美 .vertical { background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, yellow), color-stop(0.5, orange), color-stop(1.0, red)) no-repeat; height:100px; } .horizontal { background: -webkit-gradient(linear, left top, right top, from(yellow), color-stop(16%, orange),/*到高的16%的位置时渐变为橙色*/ color-stop(32%, pink),/*到高的32%的位置时渐变为粉色*/ color-stop(48%, green),/*到高的48%的位置时渐变为绿色*/ color-stop(64%, blue),/*到高的64%的位置时渐变为蓝色*/ color-stop(80%, indigo),/*到高的80%的位置时渐变为紫蓝色*/ to(red)) no-repeat; height:100px; } 必须在safari与chrome才能运行。 上面是垂直渐变，这里是水平渐变。我们可以用from与top减少首尾两个color-stop。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]结语，这就是多种浏览器共存的带来的和谐局面，我宁愿IE实现完全垄断了。下一部分才是征途的开始，光IE处理滤镜失效的问题，就要动用table这个上古神器了。SVG，在上面的运框中，你们看到了，我还特意搞了一个小工具来创建这些特殊的对象……

　　推荐阅读

　　使用jQuery简化Ajax开发 Ajax开发入门

这篇文章就会带领你见识一下jQuery的哲学，探讨一下他的特性以及功能，并且会做一些ajax的示例，以及如何使用plug- in（插件）来扩展jQuery。1. 什么是jQuery？jQuery是个很优秀的Javascript库，它诞生于2006年，出>>>详细阅读

本文标题：javascript线性渐变一

地址：http://www.17bianji.com/kaifa2/JS/27977.html

 1/2    1