当前位置：首页 > 资讯 > 技术文档

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

时间：2020-12-19 04:36 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了jQuery与js实现颜色渐变的方法。分享给大家供大家参考，具体如下： [b]1.目的[/b] 本来想的是提示用户应该点某个按钮这个功能，就想着让这个按钮div的边框变成醒目的颜色然后逐渐变白。在网上搜了搜，本来想使用jQuery的animate，后来发现这个方法只能用来进行长度的渐变。还有就是需要下载jQuery的颜色渐变插件来实现，感觉挺麻烦的，就自己用土办法实现了。 [b]2.原理[/b] 先获得初始颜色的rgb，再获得终止颜色的rgb，使用rgb三个数字的差值，从初始颜色的rgb逐渐过渡到终止颜色的rgb。 [b]3.代码[/b] 获得颜色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. [b]PS：这里再为大家推荐几款本站的相关在线工具：[/b] [b]在线RGB、HEX颜色代码生成器： [/b][url=http://tools.jb51.net/color/rgb_color_generator]http://tools.jb51.net/color/rgb_color_generator[/url] [b]RGB颜色查询对照表_颜色代码表_颜色的英文名称大全： [/b][url=http://tools.jb51.net/color/jPicker]http://tools.jb51.net/color/jPicker[/url] [b]在线网页调色板工具： [/b][url=http://tools.jb51.net/color/color_picker]http://tools.jb51.net/color/color_picker[/url] [b]在线颜色选择器工具/RGB颜色查询对照表： [/b][url=http://tools.jb51.net/color/colorpicker]http://tools.jb51.net/color/colorpicker[/url] 更多关于JavaScript相关内容可查看本站专题：《[url=http://www.1sucai.cn/Special/502.htm]JavaScript切换特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/462.htm]JavaScript动画特效与技巧汇总[/url]》、《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：js 本地预览的简单实现方法
下一篇：js中json对象和字符串的理解及相互转化操作实现方法

资讯排行榜
更多>>