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

 更新时间:2016年12月30日 10:02:25   作者:fuxiaoshao   我要评论
这篇文章主要介绍了jQuery与js实现颜色渐变的方法,涉及javascript与jQuery的正则操作与数学运算相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery与js实现颜色渐变的方法。分享给大家供大家参考,具体如下:

1.目的

本来想的是 提示用户应该点某个按钮 这个功能,就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白。

在网上搜了搜,本来想使用jQuery的animate,后来发现这个方法只能用来进行长度的渐变。还有就是需要下载jQuery的颜色渐变插件来实现,感觉挺麻烦的,就自己用土办法实现了。

2.原理

先获得初始颜色的rgb,再获得终止颜色的rgb,使用rgb三个数字的差值,从初始颜色的rgb逐渐过渡到终止颜色的rgb。

3.代码

获得颜色rgb的代码如下:

//将输入的颜色字符串转换成十进制数组
function getData(color) {
  var re = RegExp;
  if (/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.test(color)) {
    //#rrggbb
    return [parseInt(re.$1,16),parseInt(re.$2,16),parseInt(re.$3,16)];
  } else if (/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.test(color)) {
    //#rgb
    return [parseInt(re.$1+re.$1,16),parseInt(re.$2+re.$2,16),parseInt(re.$3+re.$3,16)];
  } else if (/^rgb(.*),(.*),(.*)$/i.test(color)) {
    //rgb(n,n,n) or rgb(n%,n%,n%)
    if(re.$1.indexOf("%")>-1){
      return [parseInt(parseFloat(re.$1, 10) * 2.55),
          parseInt(parseFloat(re.$2, 10) * 2.55),
          parseInt(parseFloat(re.$3, 10) * 2.55)];
    }else{
       return [parseInt(re.$1),parseInt(re.$2),parseInt(re.$3)];
    }
  }
}

方法中没有队color的验证之类的方法,见谅。传入的参数color格式可以是:"#1ba3e1"、"#f0e"、"rgb(200,50,100)"、"rgb(20%,80%,50%)"这四种格式。返回的是rgb三个数值组成的数组。

然后进行颜色的渐变:

(function($){$.fn.shade = function(prop,color1,color2,mills){
  var count = mills/200;
  var data1 = getData(color1);
  var data2 = getData(color2);
  var red = data1[0],green = data1[1],blue = data1[2];
  var r = (data2[0]-data1[0])/count,g = (data2[1]-data1[1])/count,b = (data2[2]-data1[2])/count;
  obj_temp = $(this);
  for(var i=1;i<count+1;i++){
    setTimeout("$(obj_temp).css('"+prop+"','rgb("+parseInt(red+r*i+0.5)+","+
        parseInt(green+g*i+0.5)+","+parseInt(blue+b*i+0.5)+")');", i*200);
  }
}})(jQuery);

这里我在jQuery中定义了一个shade函数,参数:对象渐变的属性(如border-color)、起始颜色、终止颜色、变色所需时间。我规定了200ms进行一次变色(可以自行调整),使用setTimeout函数每200ms执行一次变化。(我起初想使用while()或者递归来实现每隔一段时间执行一次变化,但js中的线程不像java中用Thread.sleep()就可以等待,所以不得不先将要运行的变色代码全部扔到setTimeout中,等待依次执行。)

代码中使用

$("#more").shade("border-color","#1ba3e1","#fff",2000);

就可以实现了。

注:运行此函数需要定义一个obj_temp的全局变量。

如果运行出现BUG自行调试。。。Thanks for watching.

PS:这里再为大家推荐几款本站的相关在线工具:

在线RGB、HEX颜色代码生成器:
http://tools.jb51.net/color/rgb_color_generator

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全:
http://tools.jb51.net/color/jPicker

在线网页调色板工具:
http://tools.jb51.net/color/color_picker

在线颜色选择器工具/RGB颜色查询对照表:
http://tools.jb51.net/color/colorpicker

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • JavaScript数组方法大全(推荐)

    JavaScript数组方法大全(推荐)

    本文是小编给大家特意整理的关于js数组方法的知识,非常实用,在面试笔试题中经常用得到,有需要的朋友可以参考下
    2016-07-07
  • js实现加载更多功能实例

    js实现加载更多功能实例

    这篇文章主要介绍了js实现加载更多功能的方法,以实例演示了加载更多的代码实现,非常具有实用价值,需要的朋友可以参考下
    2016-10-10
  • 让低版本浏览器支持input的placeholder属性(js方法)

    让低版本浏览器支持input的placeholder属性(js方法)

    低版本浏览器一般都不会支持input的placeholder属性,接下来使用js实现下,感兴趣的朋友可以参考下哈
    2013-04-04
  • js计算页面刷新的次数

    js计算页面刷新的次数

    用来计算页面的刷新次数的js代码。
    2009-07-07
  • javascript 内存回收机制理解

    javascript 内存回收机制理解

    javascript语言是一门优秀的脚本语言.其中包含脚本语言的灵活性外还拥有许多高级语言的特性.
    2011-01-01
  • 使用递归遍历对象获得value值的实现方法

    使用递归遍历对象获得value值的实现方法

    下面小编就为大家带来一篇使用递归遍历对象获得value值的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • js实现超简单的展开、折叠目录代码

    js实现超简单的展开、折叠目录代码

    这篇文章主要介绍了js实现超简单的展开、折叠目录代码,通过javascript操作鼠标点击事件控制页面元素样式的动态改变实现该功能,非常简单实用,需要的朋友可以参考下
    2015-08-08
  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS不间断横向滚动实现代码

    不间断横向滚动想必大家在很多场合都有见过吧,本文也使用DIV+CSS+JS实现一个,感兴趣的你可以参考下哈,希望对你学习有所帮助
    2013-03-03
  • toString()一个会自动调用的方法

    toString()一个会自动调用的方法

    toString方法的作用是不用多说的了,这个JavaScript内置方法还有一个特性是:在执行一些特殊方法的时候,比如alert或innerHTML等方法,它将由脚本解析器自动调用。
    2010-02-02
  • Javascript中匿名函数的调用与写法实例详解(多种)

    Javascript中匿名函数的调用与写法实例详解(多种)

    js中定义函数的方式有很多种,函数直接量就是其中一种,下面通过本文给大家介绍匿名函数是如何调用的及匿名函数的n中写法,对js匿名函数调用,js匿名函数写法相关知识感兴趣的朋友一起学习吧
    2016-01-01

最新评论