漂亮! js实现颜色渐变效果


Posted in Javascript onAugust 12, 2016

今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个js代码,试了试,很完美哦! 

漂亮! js实现颜色渐变效果

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/swiper-3.3.1.jquery.min.js"></script>
<script type="text/javascript">
 /*
  // startColor:开始颜色hex
  // endColor:结束颜色hex
  // step:几个阶级(几步)
  */
 function gradientColor(startColor,endColor,step){
  startRGB = this.colorRgb(startColor);//转换为rgb数组模式
  startR = startRGB[0];
  startG = startRGB[1];
  startB = startRGB[2];

  endRGB = this.colorRgb(endColor);
  endR = endRGB[0];
  endG = endRGB[1];
  endB = endRGB[2];

  sR = (endR-startR)/step;//总差值
  sG = (endG-startG)/step;
  sB = (endB-startB)/step;

  var colorArr = [];
  for(var i=0;i<step;i++){
   //计算每一步的hex值
   var hex = this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');
   colorArr.push(hex);
  }
  return colorArr;
 }

 // 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
 gradientColor.prototype.colorRgb = function(sColor){
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  var sColor = sColor.toLowerCase();
  if(sColor && reg.test(sColor)){
   if(sColor.length === 4){
    var sColorNew = "#";
    for(var i=1; i<4; i+=1){
     sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
    }
    sColor = sColorNew;
   }
   //处理六位的颜色值
   var sColorChange = [];
   for(var i=1; i<7; i+=2){
    sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
   }
   return sColorChange;
  }else{
   return sColor;
  }
 };

 // 将rgb表示方式转换为hex表示方式
 gradientColor.prototype.colorHex = function(rgb){
  var _this = rgb;
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  if(/^(rgb|RGB)/.test(_this)){
   var aColor = _this.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
   var strHex = "#";
   for(var i=0; i<aColor.length; i++){
    var hex = Number(aColor[i]).toString(16);
    hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
    if(hex === "0"){
     hex += hex;
    }
    strHex += hex;
   }
   if(strHex.length !== 7){
    strHex = _this;
   }
   return strHex;
  }else if(reg.test(_this)){
   var aNum = _this.replace(/#/,"").split("");
   if(aNum.length === 6){
    return _this;
   }else if(aNum.length === 3){
    var numHex = "#";
    for(var i=0; i<aNum.length; i+=1){
     numHex += (aNum[i]+aNum[i]);
    }
    return numHex;
   }
  }else{
   return _this;
  }
 }
 var gradient = new gradientColor('#e82400','#8ae800',10);
 console.log(gradient);//控制台输出
 alert(gradient);
 for(var i=0;i<gradient.length;i++){
  var htmls='<div class="mmm'+i+'">'+i+'</div>';
  $("body").append(htmls);
  console.log($("mmm"+i));
  console.log(gradient[i]);
  $(".mmm"+i).css("background-color",gradient[i]);
 }

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
初识Javascript小结
Jul 16 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
js限制输入框只能输入数字(onkeyup触发)
Sep 28 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 #Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 #Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 #Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 #Javascript
You might like
php网站地图生成类示例
2014/01/13 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
ExtJS 入门
2010/10/29 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
使用python分析git log日志示例
2014/02/27 Python
Python中无限元素列表的实现方法
2014/08/18 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python重试装饰器的简单实现方法
2019/01/31 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python中Pexpect的工作流程实例讲解
2021/03/02 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
政府门卫岗位职责
2014/04/29 职场文书
室内设计专业自荐信
2014/05/31 职场文书
市场推广策划方案
2014/06/02 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
预备党员半年考察意见
2015/06/01 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Django显示可视化图表的实践
2021/05/10 Python
Pygame Event事件模块的详细示例
2021/11/17 Python
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL