漂亮! 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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
vue+django实现下载文件的示例
Mar 24 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python 正则表达式操作指南
2009/05/04 Python
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL