图片主题色在图片所占比例较大的页面中,能够配合图片起到很好视觉效果,给人一种和谐、一致的感觉。同时也可用在图像分类,搜索识别等方面。通常主题色的提取都是在后端完成的,前端将需要处理的图片以链接或id的形式提供给后端,后端通过运行相应的算法来提取出主题色后,再返回相应的结果。
但是过程麻烦所以今天分享个插件直接获取
上次的分享不知道为什么用着轮播一轮就不好使了,于是上网查找等有很好的用法
需要插件:jquery.adaptive-backgrounds.js
其他jq、swper自行引入
JS
$(function(){
//轮播
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
autoplay : 3000,
autoplayDisableOnInteraction : false,
// 如果需要分页器
pagination: '.swiper-pagination'
});
//获取图片颜色值
function getcolor(){
var img = document.getElementsByClassName('swiper-slide-active')[0].children[0];
var colors = RGBaster.colors(img, {
paletteSize: 30,
success: function(colors){
img.style.borderColor = colors.palette[0];
var makeDivWithClassAndBGColor = function(klass, color){
var div = document.createElement("div");
div.className = klass;
div.style.backgroundColor = color;
return div;
};
console.log("-----------------------------------------------");
console.log("Dominant color:", colors.dominant);
console.log("Secondary color:", colors.secondary);
console.log("Palette length:", colors.palette.length);
console.log("-----------------------------------------------");
//console.log("Dominant color:", colors.secondary);
var bgcolor = colors.secondary;
$('.boxbg').css("background",bgcolor);
}
});
};
setint = setInterval(getcolor,10);
getcolor();
});
HTML
<main class="container">
<!--轮播-->
<div class="swiper-box">
<div class="boxbg"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://g.hiphotos.baidu.com/image/pic/item/5243fbf2b211931376d158d568380cd790238dc1.jpg"></div>
<div class="swiper-slide"><img src="http://a.hiphotos.baidu.com/image/pic/item/4a36acaf2edda3ccc4a53e450ce93901213f9216.jpg"></div>
<div class="swiper-slide"><img src="http://a.hiphotos.baidu.com/image/pic/item/35a85edf8db1cb1371b75377d054564e93584bf3.jpg"></div>
<div class="swiper-slide"><img src="http://h.hiphotos.baidu.com/image/pic/item/b999a9014c086e064a76b12f0f087bf40bd1cbfc.jpg"></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
</main>
CSS
<style type="text/css">
.container .swiper-box {
width: 100%;
height: 200px;
background: #fff;
position: relative;
}
.container .swiper-box .boxbg {
width: 100%;
height: 179px;
position: relative;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #8BA9E7;
}
.swiper-container {
width: 100%;
height: auto;
position: absolute;
top: 0;
}
.swiper-container img {
width: 90%;
height: 197px !important;
border-radius: 10px;
display: block;
height: 200px;
margin: 40px auto;
/* padding-top: 3px; */
box-shadow: 0px 3px 20px 1px #ddd;
}
</style>
完整代码:https://download.csdn.net/download/qq_42396791/10751372