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 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
May 21 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python中subprocess的简单使用示例
2015/07/28 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
Java模拟试题
2014/11/10 面试题
日语专业推荐信
2013/11/12 职场文书
市场开发与营销专业求职信
2013/12/31 职场文书
授权委托书格式模板
2014/04/03 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
大学入学感言
2015/08/01 职场文书
2019财务转正述职报告
2019/06/27 职场文书
Python实现byte转integer
2021/06/03 Python