漂亮! 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地址增加链接的方法分享
Jan 20 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
node.js使用nodemailer发送邮件实例
Mar 10 Javascript
下拉框select的绑定示例
Sep 04 Javascript
详谈javascript异步编程
Feb 21 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
js+h5 canvas实现图片验证码
Oct 11 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开发入门教程之面向对象
2006/12/05 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
js+HTML5实现视频截图的方法
2015/06/16 Javascript
jquery获取select选中值的方法分析
2015/12/22 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
解决uWSGI的编码问题详解
2017/03/24 Python
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python3解释器知识点总结
2019/02/19 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
python实现控制台输出颜色
2021/03/02 Python
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
电子银行业务授权委托书
2014/10/10 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
疾病证明书
2015/06/19 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
python基础之文件操作
2021/10/24 Python