插件 jQuery.adaptive backgrounds 中文API文档
🌙
手机阅读
本文目录结构
插件 jQuery.adaptive backgrounds 中文API文档
- Github 地址：https://github.com/briangonzalez/jquery.adaptive-backgrounds.js
- 源码下载： -
- 效果演示： http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/
一个jQuery插件，用于从图像中提取主色并将颜色应用于父级。
只需在页面中包含jQuery和脚本，并像这样调用它：
$(document).ready(function(){
$.adaptiveBackground.run();
});
该脚本查找具有以下data-adaptive-background属性的图像：
<img src="/image.jpg" data-adaptive-background>
使用带有CSS背景图像的元素
< img>AB不支持使用嵌套在父元素内部的元素，而是支持抓取独立元素的背景图像的主色，然后应用相应的主色作为所述元素的背景色。
通过向data-ab-css-background元素添加数据属性来启用此功能。请参阅以下示例：
<div style='background-image: url(/some-image.jpg)' data-adaptive-background data-ab-css-background></div>
演示
这是一个关于它如何工作的小演示。（1）页面加载（2）提取图像的主要背景颜色（3）将所述颜色应用于图像的父级。演示大幅减速以显示效果。
API
这个插件公开了一种方法：
- $.adaptiveBackground.run(opts) arg: opts (Object) an optional argument to be merged in with the defaults.
默认选项
- 选择字符串（默认值：‘img[ data-adaptive-background=“1”]’） CSS选择它表示哪些图像抓取/过程。理想情况下，此选择器将以img开头，以确保我们只抓取并尝试处理实际图像。
- 父 falsy （默认值：null） CSS选择其表示该父应用背景颜色。默认情况下，颜色应用于DOM树上的父级。
- normalizeTextColor布尔（默认：false）选项正常化父文字的颜色，如果背景颜色太暗或太亮。
- normalizedTextColors对象常量（默认值：{dark: ‘#000’, light: ‘#fff’}）当背景是要么过于黑暗/光照使用的文本的颜色。
- shadeVariation blend|true|false（默认）选项用于遮蔽父级的颜色或更暗（参见shadePercentage）或将父级的颜色与另一种颜色混合一定百分比（请参阅shadeColors）。
- shadePercentage float（默认值:)0设置使用的着色或混合的百分比。可以在-1.00到1.00之间调整。
- shadeColors Object Literal（默认值:){light:‘rgb(255,255,255)’,dark:‘rgb(0,0,0)’}设置将用于混合背景颜色的颜色。提供两个值以说明背景颜色为浅色或深色开始。
- 透明 透明主色。可以从0.01调整到0.99。
示例： 调用run方法，传入您要覆盖的任何选项。
var defaults = {
selector: '[data-adaptive-background="1"]',
parent: null,
exclude: [ 'rgb(0,0,0)', 'rgba(255,255,255)' ],
shadeVariation: false,
shadePercentage: 0,
shadeColors: {
light: 'rgb(255,255,255)',
dark: 'rgb(0,0,0)'
},
normalizeTextColor: false,
normalizedTextColors: {
light: "#fff",
dark: "#000"
},
lumaClasses: {
light: "ab-light",
dark: "ab-dark"
},
transparent: null
};
$.adaptiveBackground.run(defaults)
发生的事件
- ab-color-found 事件当找到图像的主色时，将触发此事件。有效载荷包括主色以及图像中包含的调色板。
示例： 绑定到ab-color-found事件，如下所示：
$('img.my-image').on('ab-color-found', function(ev,payload){
console.log(payload.color); // The dominant color in the image.
console.log(payload.palette); // The color palette found in the image.
console.log(ev); // The jQuery.Event object
});
成功回调
您可能希望提供一个回调函数，该函数在执行魔术后调用。
$.adaptiveBackground.run({
success: function($img, data) {
console.log('Success!', $img, data);
}
});
请注意，每个图像都会调用一次此回调。
注意事项
此插件使用< canvas>元素和ImageData对象，并且由于跨站点安全性限制，如果尝试从未在当前域上托管的图像中提取颜色，则脚本将失败，除非图像允许跨源资源共享。
在S3上启用CORS
要为S3存储桶上托管的映像启用CORS，请按照此处的Amazon指南进行操作; 将以下内容添加到存储桶的CORS配置中：
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
对于所有图像，您还可以选择在图像中包含跨源属性。这不是绝对必要的，因为anonymous原始版本是在Javascript代码中设置的，但是作为超级开发人员，您会感到荣幸。
<img src="/image.jpg" data-adaptive-background cross-origin="anonymous"/>
