漂亮! 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 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
Jun 14 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
vue中渲染对象中属性时显示未定义的解决
Jul 31 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/06 PHP
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php日历制作代码分享
2014/01/20 PHP
php连接mysql数据库
2017/03/21 PHP
浅析PHP开发规范
2018/02/05 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
Python中的包和模块实例
2014/11/22 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python实现批量修改文件名
2020/03/23 Python
Django实现内容缓存实例方法
2020/06/30 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
森林防火工作方案
2014/02/14 职场文书
倡议书格式及范文
2015/04/29 职场文书
指导教师推荐意见
2015/06/05 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis