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 相关文章推荐
JavaScript mapreduce工作原理简析
Nov 25 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 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提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php生成图片验证码的方法
2016/04/15 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
php7性能提升的原因详解
2019/10/13 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
python备份文件的脚本
2008/08/11 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
客服部工作职责范本
2014/02/14 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
销售人员求职信
2014/07/22 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
借名购房协议书范本
2014/10/06 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
党校学习个人总结
2015/02/15 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers