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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
Sep 14 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 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根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php中的动态调用实例分析
2015/01/07 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python 如何实现访问者模式
2020/07/28 Python
python实现自动清理重复文件
2020/08/24 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
HTML5 weui使用笔记
2019/11/21 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
俄罗斯厨房产品购物网站:COOK HOUSE
2021/03/15 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
毕业生医学检验求职信
2013/10/16 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
物理教学随笔感言
2014/02/22 职场文书
大学军训感言200字
2014/02/26 职场文书
企业新年寄语
2014/04/04 职场文书
《长相思》听课反思
2014/04/10 职场文书
银行进社区活动总结
2014/07/07 职场文书
护士业务学习心得体会
2016/01/25 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书