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 相关文章推荐
extjs fckeditor集成代码
May 10 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
vue数字类型过滤器的示例代码
Sep 07 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
prettier自动格式化去换行的实现代码
Aug 25 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
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
java判断三位数的实例讲解
2019/06/10 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
Python networkx包的实现
2020/02/14 Python
python实现扫雷小游戏
2020/04/24 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
外国语学院毕业生自荐信
2013/10/28 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
公司开除员工通知
2015/04/22 职场文书
2015年化妆品销售工作总结
2015/05/11 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书