jQuery与原生JS实现颜色渐变的方法

作者：青柠时间：2026-10-21 19:31:09浏览：540

本文介绍如何使用jQuery和原生JavaScript实现元素颜色的渐变效果。通过解析RGB值并计算差值，利用setTimeout定时更新样式，无需额外插件即可实现边框或背景色的平滑过渡。

jQuery与JS实现颜色渐变教程

本文介绍了利用jQuery和JavaScript实现颜色渐变效果的具体方法，供读者参考学习。

实现目标与原理

1. 目标

初衷是为了提示用户点击某个按钮，因此希望该按钮div的边框能变为醒目的颜色，随后逐渐变白。

经过搜索，发现jQuery的animate方法仅支持长度属性的渐变。若使用jQuery的颜色渐变插件则较为繁琐，因此决定采用自定义方式实现。

2. 原理

首先获取起始颜色的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参数进行严格验证，敬请谅解。支持传入"#1ba3e1"、"#f0e"、"rgb(200,50,100)"或"rgb(20%,80%,50%)"四种格式，返回由三个数值组成的数组。

接下来执行颜色渐变逻辑：


(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执行一次颜色变化（时间可自定义调整）。由于JavaScript单线程特性，无法像Java那样使用Thread.sleep()等待，因此需将所有变色代码通过setTimeout依次放入执行队列。

调用示例如下：


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

即可实现上述效果。

注意：运行此函数需预先定义全局变量obj_temp。

若运行中出现BUG，请自行调试。感谢观看。

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程序设计有所帮助。

作者最新文章

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53

JavaScript新手常犯的编码错误与最佳实践指南

2026-11-04 22:12:38