JS实现颜色梯度与渐变效果完整实例


Posted in Javascript onDecember 30, 2016

本文实例讲述了JS实现颜色梯度与渐变效果的方法。分享给大家供大家参考,具体如下:

运行效果图如下:

JS实现颜色梯度与渐变效果完整实例

完整实例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript 颜色梯度和渐变效果</title>
<script type="text/javascript">
var $ = function (id) {
  return "string" == typeof id ? document.getElementById(id) : id;
};
var Extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
}
var Map = function(array, callback, thisObject){
 if(array.map){
 return array.map(callback, thisObject);
 }else{
 var res = [];
 for (var i = 0, len = array.length; i < len; i++) { res.push(callback.call(thisObject, array[i], i, array)); }
 return res;
 }
}
var ColorGrads = function(options){
 this.SetOptions(options);
 this.StartColor = this.options.StartColor;
 this.EndColor = this.options.EndColor;
 this.Step = Math.abs(this.options.Step);
};
ColorGrads.prototype = {
 //设置默认属性
 SetOptions: function(options) {
  this.options = {//默认值
 StartColor: "#fff",//开始颜色
 EndColor: "#000",//结束颜色
 Step: 20//渐变级数
  };
  Extend(this.options, options || {});
 },
 //获取渐变颜色集合
 Create: function() {
 var colors = [],
 startColor = this.GetColor(this.StartColor),
 endColor = this.GetColor(this.EndColor),
 stepR = (endColor[0] - startColor[0]) / this.Step,
 stepG = (endColor[1] - startColor[1]) / this.Step,
 stepB = (endColor[2] - startColor[2]) / this.Step;
 //生成颜色集合
 for(var i = 0, n = this.Step, r = startColor[0], g = startColor[1], b = startColor[2]; i < n; i++){
 colors.push([r, g, b]); r += stepR; g += stepG; b += stepB;
 }
 colors.push(endColor);
 //修正颜色值
 return Map(colors, function(x){ return Map(x, function(x){
 return Math.min(Math.max(0, Math.floor(x)), 255);
 });});
 },
 //获取颜色数据
 GetColor: function(color) {
 if(/^#[0-9a-f]{6}$/i.test(color))
 {//#rrggbb
 return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
  function(x){ return parseInt(x, 16); }
 )
 }
 else if(/^#[0-9a-f]{3}$/i.test(color))
 {//#rgb
 return Map([color.substr(1, 1), color.substr(2, 1), color.substr(3, 1)],
  function(x){ return parseInt(x + x, 16); }
 )
 }
 else if(/^rgb(.*)$/i.test(color))
 {//rgb(n,n,n) or rgb(n%,n%,n%)
 return Map(color.match(/\d+(\.\d+)?\%?/g),
  function(x){ return parseInt(x.indexOf("%") > 0 ? parseFloat(x, 10) * 2.55 : x, 10); }
 )
 }
 else
 {//color
 var mapping = {"red":"#FF0000"};//略
 color = mapping[color.toLowerCase()];
 if(color){
  return Map([color.substr(1, 2), color.substr(3, 2), color.substr(5, 2)],
  function(x){ return parseInt(x, 16); }
  )
 }
 }
 }
};
var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}
var Bind = function(object, fun) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function() {
 return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
 }
}
//渐变对象
var ColorTrans = function(obj, options){
 this._obj = $(obj);
 this._timer = null;//定时器
 this._index = 0;//索引
 this._colors = [];//颜色集合
 this._grads = new ColorGrads();
 this.SetOptions(options);
 this.Speed = Math.abs(this.options.Speed);
 this.CssColor = this.options.CssColor;
 this._startColor = this.options.StartColor || CurrentStyle(this._obj)[this.CssColor];
 this._endColor = this.options.EndColor;
 this._step = Math.abs(this.options.Step);
 this.Reset();
 this.SetColor();
};
ColorTrans.prototype = {
 //设置默认属性
 SetOptions: function(options) {
 this.options = {//默认值
 StartColor: "",//开始颜色
 EndColor: "#000",//结束颜色
 Step: 20,//渐变级数
 Speed: 20,//渐变速度
 CssColor: "color"//设置属性(Scripting属性)
 };
  Extend(this.options, options || {});
 },
 //重设颜色集合
 Reset: function(color) {
 //修改颜色后必须重新获取颜色集合
 color = Extend({ StartColor: this._startColor, EndColor: this._endColor, Step: this._step }, color || {});
 //设置属性
 this._grads.StartColor = this._startColor = color.StartColor;
 this._grads.EndColor = this._endColor = color.EndColor;
 this._grads.Step = this._step = color.Step;
 //获取颜色集合
 this._colors = this._grads.Create();
 this._index = 0;
 },
 //颜色渐入
 FadeIn: function() {
 this.Stop(); this._index++; this.SetColor();
 if(this._index < this._colors.length - 1){
 this._timer = setTimeout(Bind(this, this.FadeIn), this.Speed);
 }
 },
 //颜色渐出
 FadeOut: function() {
 this.Stop(); this._index--; this.SetColor();
 if(this._index > 0){
 this._timer = setTimeout(Bind(this, this.FadeOut), this.Speed);
 }
 },
 //颜色设置
 SetColor: function() {
 var color = this._colors[Math.min(Math.max(0, this._index), this._colors.length - 1)];
 this._obj.style[this.CssColor] = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";
 },
 //停止
 Stop: function() {
 clearTimeout(this._timer);
 }
};
</script>
</head>
<body>
<style type="text/css">
#idGrads{}
#idGrads div{ font-size:0;height:1px;}
</style>
<div id="idGrads"> </div>
<script>
var forEach = function(array, callback, thisObject){
 if(array.forEach){
 array.forEach(callback, thisObject);
 }else{
 for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
 }
}
var colors = new ColorGrads({ StartColor: "#fff", EndColor: "rgb(20,127,0)" }).Create();
forEach(colors.concat().concat(colors.reverse()), function(x){
 $("idGrads").innerHTML += "<div style=\"background-color:"+"rgb(" + x[0] + "," + x[1] + "," + x[2] + ");\"></div>";
})
</script>
<Br />
<Br />
<style type="text/css">
#idMenu{ background:#DBDBDB;text-align:center;line-height:25px; table-layout:fixed;}
#idMenu td{ cursor:pointer;}
</style>
<table id="idMenu" width="600" border="0" cellspacing="5" cellpadding="0">
 <tr>
 <td onclick="location.href='#'">Cropper</td>
 <td onclick="location.href='#'">Tween</td>
 <td onclick="location.href='#'">Slider</td>
 <td onclick="location.href='#'">Resize</td>
 <td onclick="location.href='#'">Drag</td>
 </tr>
</table>
<script>
forEach($("idMenu").getElementsByTagName("td"), function(x, i){
 var ct1 = new ColorTrans(x, { StartColor: "#666", EndColor: "#fff" });
 var ct2 = new ColorTrans(x, { StartColor: "#f6f6f6", EndColor: "rgb(20,150,0)", CssColor: "backgroundColor" });
 x.onmouseover = function(){ ct1.FadeIn(); ct2.FadeIn(); }
 x.onmouseout = function(){ ct1.FadeOut(); ct2.FadeOut(); }
})
</script>
<Br />
<Br />
<div id="idRandom" style="padding:10px;color:#fff; background-color:#CCC;">点击随机换颜色</div>
<script>
var ctRandom = new ColorTrans("idRandom", { EndColor: "#CCC", CssColor: "backgroundColor" })
$("idRandom").onclick = function(){
 var rgb = Map([1,1,1], function(){ return Math.floor((Math.random() * 255)); } );
 ctRandom.Reset({ StartColor: this.style.backgroundColor, EndColor: "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")" })
 ctRandom.FadeIn();
}
</script>
</body>
</html>
Javascript 相关文章推荐
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
详解vue嵌套路由-query传递参数
May 23 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
详解JS对象封装的常用方式
Dec 30 #Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 #Javascript
jQuery与js实现颜色渐变的方法
Dec 30 #Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 #Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 #Javascript
浅谈JavaScript的函数及作用域
Dec 30 #Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 #Javascript
You might like
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP 绘制网站登录首页图片验证码
2016/04/12 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
详解webpack异步加载业务模块
2017/06/23 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python3使用GUI统计代码量
2019/09/18 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
汽车运用工程毕业生自荐信
2013/10/29 职场文书
公司薪酬管理制度
2014/01/31 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
商业房地产广告语
2014/03/13 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS