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 相关文章推荐
js 函数的副作用分析
Aug 23 Javascript
JS定时器实例
Apr 17 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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防盗链的常用方法小结
2010/07/02 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
jQuery 工具函数学习资料
2010/04/29 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
ES6小技巧之代替lodash
2019/06/07 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
vue 中的动态传参和query传参操作
2020/11/09 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
python常用函数与用法示例
2019/07/02 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
Java中实现多态的机制
2015/08/09 面试题
九年级物理教学反思
2014/01/29 职场文书
社会实践评语
2014/04/28 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
酒店员工手册范本
2015/05/14 职场文书
JavaScript获取URL参数的方法分享
2022/04/07 Javascript