插件 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() );

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了