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


Posted in Javascript onDecember 30, 2016

本文实例讲述了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.

Javascript 相关文章推荐
jQuery拖拽div实现思路
Feb 19 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
微信小程序实现美团菜单
Jun 06 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 #Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 #Javascript
浅谈JavaScript的函数及作用域
Dec 30 #Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 #Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 #Javascript
浅谈js script标签中的预解析
Dec 30 #Javascript
jQuery实现页面顶部下拉广告
Dec 30 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
限制textbox或textarea输入字符长度的JS代码
2013/10/16 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
解决django FileFIELD的编码问题
2020/03/30 Python
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
韩国CJ食品专卖网:CJonmart
2016/09/11 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
美国名牌手表折扣网站:Jomashop
2020/05/22 全球购物
行政工作试用期自我评价
2014/09/14 职场文书
企业愿景口号
2015/12/25 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL