adaptive-background.js

2019独角兽企业重金招聘Python工程师标准>>>

关于

adaptive-background.js是一款jQuery插件，可以根据div，img标签里图片的边框颜色来动态调整父标签的背景颜色，有点类似iTunes的专辑详情的效果，如图：

使用

adaptive-backgrounds.js的API比较容易使用，只需要在页面中先包含jQuery和adaptive-backgrounds.js文件。然后运行脚本：

<!-- lang: js -->
$(document).ready(function(){
      $.adaptiveBackground.run()
});

在需要实现该效果的标签加入data-adaptive-background属性，如：

<!-- lang: html -->
<img src="/image.jpg" data-adaptive-background='1'>

或者在CSS指定背景图片的标签中使用该功能，比如div，需要在div标签中再加入data-ab-css-background属性，如：

<!-- lang: html -->
<div style='background-image: url(/some-image.jpg)' data-adaptive-background='1' data-ab-css-background='1'></div>

效果

demo

Github

briangonzalez/jquery.adaptive-background

转载于:https://my.oschina.net/hanasite/blog/337491