JavaScript 颜色梯度和渐变效果

http://www.itjxue.com 2015-08-06 23:11 来源:未知 点击次数:

很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。
关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。

实例效果

预览效果1：

这是一个颜色梯度变化演示：

运行代码框
<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head id="Head"><title>JavaScript 颜色梯度和渐变效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"></script> </p> <p>预览效果1：</p> <p>这是一个颜色梯度变化演示：</p> <p> <style type="text/css"></style> </p> <div id="idGrads"></div> <p> <script type="text/javascript"></script> </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

预览效果2：

一个颜色渐变的菜单：

运行代码框
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head id="Head"><title> JavaScript 颜色梯度和渐变效果 </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta id="metaKeywords" name="keywords" content="渐变,颜色,color,梯度,Grads,JavaScript 颜色梯度和渐变效果" /><meta name="description" content="很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果0?parseFloat(x,10)*2.55:x,10);} ) } else" /><meta name="description" content="ASP.NET,JavaScript,js,cloudgamer,web,html,css,特效,代码,效果" /><link id="CommondCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common.css" /><link id="CommondCss2" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common2.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shCore.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shThemeDefault.css" /><link id="SecondaryCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/cloudgamer/customcss.aspx" /><link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/cloudgamer/rss" /><link id="RSDLink" title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/cloudgamer/rsd.xml" /> <script src="/Script/common.js" type="text/javascript"></script> </head> <body> <p> <script type="text/javascript"></script> </p> <p> <script type="text/javascript"></script> </p> <p><br />预览效果2：</p> <p>一个颜色渐变的菜单：</p> <p> <style type="text/css"></style> </p> <table border="0" width="600" cellpadding="0" cellspacing="5" id="idMenu"> <tbody> <tr> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html'">Cropper</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2009/01/06/Tween.html'">Tween</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html'">Slider</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/12/03/Resize.html'">Resize</td> <td onclick="location.href='http://www.cnblogs.com/cloudgamer/archive/2008/11/17/Drag.html'">Drag</td> </tr> </tbody> </table> <p> <script type="text/javascript"></script> </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

预览效果3：

颜色渐变的有趣应用，点击随机颜色渐变：

运行代码框
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head id="Head"><title> JavaScript 颜色梯度和渐变效果 </title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta id="metaKeywords" name="keywords" content="渐变,颜色,color,梯度,Grads,JavaScript 颜色梯度和渐变效果" /><meta name="description" content="很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和样式的颜色渐变，前者在ie中一般用滤镜实现。实例效果0?parseFloat(x,10)*2.55:x,10);} ) } else" /><meta name="description" content="ASP.NET,JavaScript,js,cloudgamer,web,html,css,特效,代码,效果" /><link id="CommondCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common.css" /><link id="CommondCss2" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/css/common2.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shCore.css" /><link type="text/css" rel="stylesheet" href="http://common.cnblogs.com/css/shThemeDefault.css" /><link id="SecondaryCss" type="text/css" rel="stylesheet" href="http://www.cnblogs.com/cloudgamer/customcss.aspx" /><link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/cloudgamer/rss" /><link id="RSDLink" title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/cloudgamer/rsd.xml" /> <script src="/Script/common.js" type="text/javascript"></script> </head> <body> <p> <script type="text/javascript"></script> </p> <p><br />预览效果3：</p> <p>颜色渐变的有趣应用，点击随机颜色渐变：</p> <div style="padding:10px;color:#fff; background-color:#CCC;" id="idRandom">点击随机换颜色</div> <p> <script type="text/javascript"></script> </p> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：JavaScript基础教程：调试及应用

下一篇：从脚本编程的角度看JSP的安全

JavaScript 颜色梯度和渐变效果

(责任编辑：IT教学网)

相关Javascript/Ajax文章

阅读排行

专题教程

推荐Javascript/Ajax文章

最新更新Javascript/Ajax