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 Prototype 对象扩展
May 15 Javascript
javascript 简练的几个函数
Aug 29 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
js中call与apply的用法小结
Dec 28 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
pandas数据拼接的实现示例
2020/04/16 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
艺术专业大学生自我评价
2013/09/22 职场文书
专业实习自我鉴定
2013/10/29 职场文书
大学生专科毕业生自我评价
2013/11/17 职场文书
会计应届生的自荐信
2013/12/13 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
护士自我鉴定总结
2014/03/24 职场文书
不同意离婚代理词
2015/05/23 职场文书
运动会3000米加油稿
2015/07/21 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL