前言：图片下方的横条根据图片的主题色动态设置！！！
两个资源文件，一张图片
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
.cimgbox {
width: 160px;
height: 120px;
border-radius: 10px;
cursor: pointer;
position: absolute;
top: 20px;
left: 20px;
}
.cimgbox img {
width: 100%;
height: 100%;
border-radius: 10px;
}
.cimgbox i {
position: absolute;
bottom: -8px;
left: 5px;
border-radius: 0 0 10px 10px;
height: 9px;
width: 95%;
}
.cimgbox b {
position: absolute;
bottom: -11px;
left: 9px;
border-radius: 0 0 5px 5px;
height: 10px;
width: 90%;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" src='jquery.adaptive-backgrounds.js'></script>
<script type="text/javascript" src='main.js'></script>
</head>
<body>
<div class="cimgbox">
<i></i>
<b></b>
<img src="images/77.png" alt="" data-adaptive-background='1' data-description='grandpa' />
</div>
</body>
</html>jquery.adaptive-backgrounds.js
/* jshint debug: true, expr: true */
;(function($){
/* Constants & defaults. */
var DATA_COLOR = 'data-ab-color';
var DATA_PARENT = 'data-ab-parent';
var DATA_CSS_BG = 'data-ab-css-background';
var EVENT_CF = 'ab-color-found';
var DEFAULTS = {
selector: '[data-adaptive-background="1"]',
parent: null,
exclude: [ 'rgb(0,0,0)', 'rgba(255,255,255)' ],
normalizeTextColor: false,
normalizedTextColors: {
light: "#fff",
dark: "#000"
},
lumaClasses: {
light: "ab-light",
dark: "ab-dark"
}
};
// Include RGBaster - https://github.com/briangonzalez/rgbaster.js
/* jshint ignore:start */
!function(n){"use strict";var t=function(){return document.createElement("canvas").getContext("2d")},e=function(n,e){var a=new Image,o=n.src||n;"data:"!==o.substring(0,5)&&(a.crossOrigin="Anonymous"),a.onload=function(){var n=t("2d");n.drawImage(a,0,0);var o=n.getImageData(0,0,a.width,a.height);e&&e(o.data)},a.src=o},a=function(n){return["rgb(",n,")"].join("")},o=function(n){return n.map(function(n){return a(n.name)})},r=5,i=10,c={};c.colors=function(n,t){t=t||{};var c=t.exclude||[],u=t.paletteSize||i;e(n,function(e){for(var i=n.width*n.height||e.length,m={},s="",d=[],f={dominant:{name:"",count:0},palette:Array.apply(null,new Array(u)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},l=0;i>l;){if(d[0]=e[l],d[1]=e[l+1],d[2]=e[l+2],s=d.join(","),m[s]=s in m?m[s]+1:1,-1===c.indexOf(a(s))){var g=m[s];g>f.dominant.count?(f.dominant.name=s,f.dominant.count=g):f.palette.some(function(n){return g>n.count?(n.name=s,n.count=g,!0):void 0})}l+=4*r}if(t.success){var p=o(f.palette);t.success({dominant:a(f.dominant.name),secondary:p[0],palette:p})}})},n.RGBaster=n.RGBaster||c}(window);
/* jshint ignore:end */
/*
Our main function declaration.
*/
$.adaptiveBackground = {
run: function( options ){
var opts = $.extend({}, DEFAULTS, options);
/* Loop over each element, waiting for it to load
then finding its color, and triggering the
color found event when color has been found.
*/
$( opts.selector ).each(function(index, el){
var $this = $(this);
/* Small helper functions which applies
colors, attrs, triggers events, etc.
*/
var handleColors = function () {
var img = useCSSBackground() ? getCSSBackground() : $this[0];
RGBaster.colors(img, {
paletteSize: 20,
exclude: opts.exclude,
success: function(colors) {
$this.attr(DATA_COLOR, colors.dominant);
$this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette });
}
});
};
var useCSSBackground = function(){
return $this.attr( DATA_CSS_BG );
};
var getCSSBackground = function(){
return $this.css('background-image')
.replace('url(','').replace(')','');
};
/* Subscribe to our color-found event. */
$this.on( EVENT_CF, function(ev, data){
// Try to find the parent.
var $parent;
if ( opts.parent && $this.parents( opts.parent ).length ) {
$parent = $this.parents( opts.parent );
}
else if ( $this.attr( DATA_PARENT ) && $this.parents( $this.attr( DATA_PARENT ) ).length ){
$parent = $this.parents( $this.attr( DATA_PARENT ) );
}
else if ( useCSSBackground() ){
$parent = $this;
}
else if (opts.parent) {
$parent = $this.parents( opts.parent );
}
else {
$parent = $this.parent();
}
$parent.css({ backgroundColor: data.color });
// Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ
var getYIQ = function(color){
var rgb = data.color.match(/\d+/g);
return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000;
};
var getNormalizedTextColor = function (color){
return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light;
};
var getLumaClass = function (color){
return getYIQ(color) <= 128 ? opts.lumaClasses.dark : opts.lumaClasses.light;
};
// Normalize the text color based on luminance.
if ( opts.normalizeTextColor )
$parent.css({ color: getNormalizedTextColor(data.color) });
// Add a class based on luminance.
$parent.addClass( getLumaClass(data.color) )
.attr('data-ab-yaq', getYIQ(data.color));
opts.success && opts.success($this, data);
});
/* Handle the colors. */
handleColors();
});
},
};
})(jQuery);
main.js
(function(window, document, $){
$(document).ready(function(){
// Make some selections.
var $window = $(window);
var $imgWrapper = $('.cimgbox');
var $imgs = $imgWrapper.find("img");
var $logoBoxes = $('.logo .box');
var $title = $('h1');
$imgs.on('ab-color-found', function(e, data){
$(this).parents('.cimgbox')
.attr('data-color', data.color);
$(this).css({
border: "1px solid " + data.palette[0].replace(')', ",0.25)").replace('rgb', "rgba")
});
$(this).parents('.cimgbox').find('i').css({ background: data.color,opacity:0.92 })
$(this).parents('.cimgbox').find('b').css({ background: data.color,opacity:0.4 })
if ( $(this).attr('data-description') == 'grandpa' ){
$(this).parents('.cimgbox')
.css({ background: data.color })
}
});
// Run the A.B. plugin.
$.adaptiveBackground.run({ parent: '1' });
// $imgWrapper.waypoint(function(direction) {
//
// if ( $(this).attr('data-colored') )
// return;
//
// $(this).css({ background: $(this).attr('data-color') })
// .attr('data-colored', 1);
//
// }, {
// offset: '65%'
// })
// Tweet button.
var twitterTitle = 'Adaptive Backgrounds - a jQuery plugin to extract dominant colors from <img> tags and apply them to their parent';
var twitterLoc = 'http://goo.gl/zdw3uQ';
$('.button.tweet').on('click', function(e){
e.preventDefault();
window.open('http://twitter.com/share?url=' + twitterLoc + '&text=' + twitterTitle + '&', 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
})
})
})(window, document, jQuery) 
最后效果：
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
