阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.color 中文API文档

      插件 jQuery.color 中文API文档

      用于颜色处理和动画支持的jQuery插件。

      浏览器支持

      jQuery颜色在jQuery Core 3.x版本的相同浏览器上进行测试。核实

      在生产中使用jQuery Color

      我们自己或捆绑发布jQuery Color。扩展名称可以作为jQuery Color插件包含,或者您可以下载包含名称的jQuery Color版本。从以下列表中选择您的构建:

      当前版本:2.1.2

      • jQuery颜色压缩 未压缩
      • jQuery颜色扩展名称压缩 未压缩
      • jQuery颜色和扩展名称(前两个组合)压缩 未压缩

      动画的颜色

      这个插件安装了一个cssHook允许jQuery .animate()在两种颜色之间进行动画处理的插件。

      支持的属性

      backgroundColor,borderBottomColor,borderLeftColor,borderRightColor,borderTopColor,color,columnRuleColor,outlineColor,textDecorationColor,textEmphasisColor

      使用示例

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      div {
      	background-color: #bada55;
      	width: 100px;
      	border: 1px solid green;
      }
      </style>
      <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
      <script src="jquery.color.min.js"></script>
      </head>
      <body>
      <button id="go">Simple</button>
      <button id="sat">Desaturate</button>
      <div id="block">Hello!</div>
      <script>
      jQuery("#go").click(function(){
      	jQuery("#block").animate({
      		backgroundColor: "#abcdef"
      	}, 1500 );
      });
      jQuery("#sat").click(function(){
      	jQuery("#block").animate({
      		backgroundColor: jQuery.Color({ saturation: 0 })
      	}, 1500 );
      });
      </script>
      </body>
      </html>
      

      支持其他属性

      jQuery.Color.hook()可以调用该函数以支持其他css属性作为颜色,并允许它们进行动画处理。

      使用示例

      // we want to animate SVG fill and stroke properties
      jQuery.Color.hook( "fill stroke" );
      

      jQuery.Color工厂

      该jQuery.Color()函数允许您创建和操作jQuery .animate()和.css()函数接受的颜色对象。

      • 返回一个新的Color对象,类似于jQuery()或jQuery.Event
      • 接受许多格式以使用jQuery.Color.fn原型创建新的Color对象

      示例用途:

      // Parsing String Colors:
      jQuery.Color( "#abcdef" );
      jQuery.Color( "rgb(100,200,255)" );
      jQuery.Color( "rgba(100,200,255,0.5)" );
      jQuery.Color( "aqua" );
      
      // Creating Color Objects in Code:
      // use null or undefined for values you wish to leave out
      jQuery.Color( red, green, blue, alpha );
      jQuery.Color([ red, green, blue, alpha ]);
      jQuery.Color({ red: red, green: green, blue: blue, alpha: alpha });
      jQuery.Color({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha });
      
      // Helper to get value from CSS
      jQuery.Color( element, cssProperty );
      

      jQuery.Color.fn / prototype / Color Object方法

      吸气剂/二传手:

      red()             // returns the "red" component of the color ( Integer from 0 - 255 )
      red( val )        // returns a copy of the color object with the red set to val
      green()           // returns the "green" component of the color from ( Integer from 0 - 255 )
      green( val )      // returns a copy of the color object with the green set to val
      blue()            // returns the "blue" component of the color from ( Integer from 0 - 255 )
      blue( val )       // returns a copy of the color object with the blue set to val
      alpha()           // returns the "alpha" component of the color from ( Float from 0.0 - 1.0 )
      alpha( val )      // returns a copy of the color object with the alpha set to val
      hue()             // returns the "hue" component of the color ( Integer from 0 - 359 )
      hue( val )        // returns a copy of the color object with the hue set to val
      saturation()      // returns the "saturation" component of the color ( Float from 0.0 - 1.0 )
      saturation( val ) // returns a copy of the color object with the saturation set to val
      lightness()       // returns the "lightness" component of the color ( Float from 0.0 - 1.0 )
      lightness( val )  // returns a copy of the color object with the lightness set to val
      // all of the above values can also take strings in the format of "+=100" or "-=100"
      
      rgba() // returns a rgba "tuple" [ red, green, blue, alpha ]
      // rgba() setters: returns a copy of the color with any defined values set to the new value
      rgba( red, green, blue, alpha )
      rgba({ red: red, green: green, blue: blue, alpha: alpha })
      rgba([ red, green, blue, alpha ])
      
      hsla() // returns a HSL tuple [ hue, saturation, lightness, alpha ]
      // much like the rgb setter - returns a copy with any defined values set
      hsla( hue, saturation, lightness, alpha )
      hsla({ hue: hue, saturation: saturation, lightness: lightness, alpha: alpha )
      hsla([ hue, saturation, lightness, alpha ])
      

      字符串方法

      toRgbaString() // returns a css string "rgba(255, 255, 255, 0.4)"
      toHslaString() // returns a css string "hsla(330, 75%, 25%, 0.4)"
      toHexString( includeAlpha ) // returns a css string "#abcdef", with "includeAlpha" uses "#rrggbbaa" (alpha *= 255)
      

      toRgbaString和toHslaString方法将仅包括α通道,如果它不是1。如果alpha设置为,它们将返回rgb(…)和hsl(…)字符串1。

      使用其他颜色:

      transition( othercolor, distance ) // the color distance ( 0.0 - 1.0 ) of the way between this color and othercolor
      blend( othercolor ) // Will apply this color on top of the other color using alpha blending
      is( othercolor ) // Will determine if this color is equal to all defined properties of othercolor
      

      jQuery.Color属性

      颜色对象的内部

      • 在内部,RGBA值存储为color._rgba[0] = red, color._rgba[1] = green, color._rgba[2] = blue, color._rgba[3] = alpha。但请记住,每个属性都有很好的方便的setter和getter。
      • undefined/ null颜色值表示不存在。这表示transition()函数保持在转换的另一端设置的任何值。例如,动画jQuery.Color([ 255, null, null, 1 ])制作只会为颜色的红色和alpha值设置动画。

      jQuery.Color.names

      命名颜色列表存储在jQuery.Color.names对象上。它们包含的值应该是可解析的jQuery.Color()。此对象上的所有名称都应该是小写的。IE jQuery.Color(“Red”)和做的一样jQuery.Color( jQuery.Color.names[“red”] );

      还有一种命名颜色"_default",默认情况下为白色,用于颜色不可解析的情况。

      “transparent”

      关于颜色的特别说明"transparent"- null除非您为这些值指定颜色,否则它将返回红绿色和蓝色。

      jQuery.Color("#abcdef").transition("transparent", 0.5)
      

      动画到值或来自该值"transparent"仍将使用“#abcdef”表示红色绿色和蓝色。

      HSLA支持

      如果使用任何HSLA函数或解析器创建颜色,它将使_rgba阵列保持最新并具有_hsla阵列。然而,一旦在HSLA上执行RGBA操作,_hsla就会删除缓存并且所有操作将基于rgb继续(除非您返回到HSLA)。所述._hsla阵列遵循相同的格式._rbga,[hue, saturation, lightness, alpha ]。如果您需要从HSLA阵列构建HSLA颜色,则jQuery.Color().hsla( array )可以实现此目的。

      具有0饱和度或100%/ 0%亮度的颜色将以色调0存储

      可扩展性

      您可以将自己的功能添加到颜色对象中。例如,此功能将告诉您在给定的背景颜色上使用黑色或白色是否更好。

      // method taken from https://gist.github.com/960189
      jQuery.Color.fn.contrastColor = function() {
      	var r = this._rgba[0], g = this._rgba[1], b = this._rgba[2];
      	return (((r*299)+(g*587)+(b*144))/1000) >= 131.5 ? "black" : "white";
      };
      
      // usage examples:
      jQuery.Color("#bada55").contrastColor(); // "black"
      element.css( "color", jQuery.Color( element, "backgroundColor" ).contrastColor() );
      
      目录
      目录