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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
封装了一个js图片轮换效果的函数
Sep 28 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
Jun 24 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
angularJS深拷贝详解
Mar 23 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
JavaScript实现网页留言板功能
Nov 23 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关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
JS 数字转换研究总结
2013/12/26 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
javascript常用函数(1)
2015/11/04 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
解决python线程卡死的问题
2019/02/18 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
实例详解Python模块decimal
2019/06/26 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
没编程基础可以学python吗
2020/06/17 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
《乡愁》教学反思
2014/02/18 职场文书
贷款承诺书范文
2014/05/19 职场文书
廉政教育的心得体会
2014/09/01 职场文书
工作经历证明书范文
2014/11/02 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2015年助理政工师工作总结
2015/05/26 职场文书
党支部半年考察意见
2015/06/01 职场文书
地心历险记观后感
2015/06/15 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python