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

今天做组织机构,要分级别显示颜色,自己计算半天也没算出颜色渐变的方法,出来总是花里胡哨的难看的不要不要的,所以查了一下,找到一个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>

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

时间: 2016-08-09

jQuery与js实现颜色渐变的方法

本文实例讲述了jQuery与js实现颜色渐变的方法.分享给大家供大家参考,具体如下: 1.目的 本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白. 在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变.还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了. 2.原理 先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜

JS实现颜色梯度与渐变效果完整实例

本文实例讲述了JS实现颜色梯度与渐变效果的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

javascript计算渐变颜色的实例

javascript计算渐变颜色的实例 有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示: 如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图: 这时,就用到了同色系渐变颜色的计算,算法如下: function getItemColors (colorLevel) { var colors= []; //默认的最深颜色 var red = 134,green = 108, blue = 184; //最浅颜色是239,239,239 比如:最浅颜色的re

使用three.js 画渐变的直线

Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>

JavaScript实现的鼠标响应颜色渐变效果完整实例

本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

js实现颜色阶梯渐变效果(Gradient算法)

html中颜色可以使用rgb和hex方式来表示. 在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的梯级渐变算法. 其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0). 其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600).因此我们可以将16进制转换为rgb单个进行梯级

js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)

本文实例介绍了js实现图片轮播相册,具有过渡渐变效果,分享给大家供大家参考,具体内容如下 思路很简单,用2个属性保存当前图片和上一张图片,用2个定时器分别控制透明度和当前过渡的图片. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <style> #cnt{width:100%;height:80%;} .ctrl{text-align:center;border:1px solid gray;font-s

神奇!js+CSS+DIV实现文字颜色渐变效果

本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati

js+HTML5实现canvas多种颜色渐变效果的方法

本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not s

div中文字内容溢出常见的解决方法

由于文字内容的长度不确定性和页面布局的固定性,常常会遇到文字溢出的状况,有一下解决方法: 1:规定文字父容器的宽高,设置超出隐藏:overflo:"hidde" -------缺点是会经常遇到最后一行文字显示不全的情况,建议在只控制一行文字显示的时候使用 2:css+div防止文字溢出,超出部分变成省略号,折行显示,white-space:nowrap;word-break:break-all: text-overflow:ellipsis; -o-text-overflow:elli

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)

本文实例讲述了JS+CSS实现鼠标经过弹出一个DIV框效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

js点击列表文字对应该行显示背景颜色的实现代码

本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法.分享给大家供大家参考.具体如下:  JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效.   运行效果图如下: <style type="text/css"> li{cursor:pointer;} .cur{background:red;} </style> <script type="text/javascript"> windo

js+css实现有立体感的按钮式文字竖排菜单效果

本文实例讲述了js+css实现有立体感的按钮式文字竖排菜单效果.分享给大家供大家参考.具体如下: 这是一款较不错的竖排菜单,有立体感效果的菜单,不要以为那些带立体特效的菜单是按钮啊,其实它就是用JavaScript代码修饰出来的按钮,鼠标放上的时候就会有明显的立体文字效果,竖向排列的,也可以修改成横向的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-3d-nutton-v-menu-codes/ 具体代码如下: <!DOCTYP

JS实现点击文字对应DIV层不停闪动效果的方法

本文实例讲述了JS实现点击文字对应DIV层不停闪动效果的方法.分享给大家供大家参考.具体分析如下: 在很多娱乐网站我们经常看到这种效果,点击网页中某个方块中的文字,然后整个方块就不停的闪动起来,很不错的一个动态效果,容易引起顾客的注意,这个代码就是实现了这个效果,点击某个方块后,方块就会闪动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

JS实现改变HTML上文字颜色和内容的方法

本文实例讲述了JS实现改变HTML上文字颜色和内容的方法.分享给大家供大家参考,具体如下: 1. JavaScript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 1 </TITLE> <META NAME="Generator" CONTENT="EditP

jQuery实现的文字hover颜色渐变效果实例

本文实例讲述了jQuery实现的文字hover颜色渐变效果.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.j