漂亮! 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匿名函数的一种应用 代码封装
Jun 27 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
Apr 24 Javascript
JavaScript地图拖动功能SpryMap的简单实现
Jul 17 Javascript
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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无限级分类方法及代码
2013/06/21 PHP
Linux中为php配置伪静态
2014/12/17 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
在表单提交前进行验证的几种方式整理
2013/07/31 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Python使用三种方法实现PCA算法
2017/12/12 Python
Windows下python3.7安装教程
2018/07/31 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python中import与from方法总结(推荐)
2019/03/21 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Jupyter加载文件的实现方法
2020/04/14 Python
Python urllib2运行过程原理解析
2020/06/04 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
主管职责范文
2013/11/09 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers