欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery與js實(shí)現(xiàn)顏色漸變的方法

 更新時(shí)間：2016年12月30日 10:02:25   作者：fuxiaoshao  
這篇文章主要介紹了jQuery與js實(shí)現(xiàn)顏色漸變的方法,涉及javascript與jQuery的正則操作與數(shù)學(xué)運(yùn)算相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery與js實(shí)現(xiàn)顏色漸變的方法。分享給大家供大家參考，具體如下：

1.目的

本來想的是 提示用戶應(yīng)該點(diǎn)某個(gè)按鈕 這個(gè)功能，就想著讓這個(gè)按鈕div的邊框變成醒目的顏色然后逐漸變白。

在網(wǎng)上搜了搜，本來想使用jQuery的animate，后來發(fā)現(xiàn)這個(gè)方法只能用來進(jìn)行長(zhǎng)度的漸變。還有就是需要下載jQuery的顏色漸變插件來實(shí)現(xiàn)，感覺挺麻煩的，就自己用土辦法實(shí)現(xiàn)了。

2.原理

先獲得初始顏色的rgb，再獲得終止顏色的rgb，使用rgb三個(gè)數(shù)字的差值，從初始顏色的rgb逐漸過渡到終止顏色的rgb。

3.代碼

獲得顏色rgb的代碼如下：

//將輸入的顏色字符串轉(zhuǎn)換成十進(jìn)制數(shù)組
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)];
    }
  }
}

方法中沒有隊(duì)color的驗(yàn)證之類的方法，見諒。傳入的參數(shù)color格式可以是："#1ba3e1"、"#f0e"、"rgb(200,50,100)"、"rgb(20%,80%,50%)"這四種格式。返回的是rgb三個(gè)數(shù)值組成的數(shù)組。

然后進(jìn)行顏色的漸變：

(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中定義了一個(gè)shade函數(shù)，參數(shù)：對(duì)象漸變的屬性(如border-color)、起始顏色、終止顏色、變色所需時(shí)間。我規(guī)定了200ms進(jìn)行一次變色(可以自行調(diào)整)，使用setTimeout函數(shù)每200ms執(zhí)行一次變化。（我起初想使用while()或者遞歸來實(shí)現(xiàn)每隔一段時(shí)間執(zhí)行一次變化，但js中的線程不像java中用Thread.sleep()就可以等待，所以不得不先將要運(yùn)行的變色代碼全部扔到setTimeout中，等待依次執(zhí)行。）

代碼中使用

$("#more").shade("border-color","#1ba3e1","#fff",2000);

就可以實(shí)現(xiàn)了。

注：運(yùn)行此函數(shù)需要定義一個(gè)obj_temp的全局變量。

如果運(yùn)行出現(xiàn)BUG自行調(diào)試。。。Thanks for watching.

PS：這里再為大家推薦幾款本站的相關(guān)在線工具：

在線RGB、HEX顏色代碼生成器：
http://tools.jb51.net/color/rgb_color_generator

RGB顏色查詢對(duì)照表_顏色代碼表_顏色的英文名稱大全：
http://tools.jb51.net/color/jPicker

在線網(wǎng)頁調(diào)色板工具：
http://tools.jb51.net/color/color_picker

在線顏色選擇器工具/RGB顏色查詢對(duì)照表：
http://tools.jb51.net/color/colorpicker

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論