<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> .box { width: 600px; height: 600px; box-shadow: inset 0 60px rgba(255,255,255,.2), inset 0 0 300px rgba(255,255,255,.1), inset 50px -20px 0 rgba(255,255,255,.1), inset -300px 120px rgba(255,255,255,.06); -webkit-transition: background-color .25s; transition: background-color .25s; overflow: hidden; position: relative;} #title{position: absolute;width: 100%;height: 40px;line-height: 40px;z-index: 9000;text-align: center;color:#fff; box-shadow: 2px 2px 2px rgba(0,0,0,.2);-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2);-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2);-o-box-shadow: 2px 2px 2px rgba(0,0,0,.2);-ms-box-shadow: 2px 2px 2px rgba(0,0,0,.2); } .list { width: 600px; height: 600px; position: absolute; text-align: center; } .list > img { vertical-align: middle; box-shadow: 0 0 10px rgba(0,0,0,.35) } .list::after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .index { width: 600px; margin-top: 20px; text-align: center; } a { display: inline-block; margin: 0 2px; width: 16px; height: 16px; line-height: 16px; border-radius: 14px; background-color: #ddd; text-align: center; color: #333; font-family: 'microsoft yahei'; font-size: 12px; } a:hover { text-decoration: none; } .active { background-color: #cd0000; color: #fff; } #show{width: 20px;height: 20px;border: 1px solid #ddd;} </style> </head> <body> <div id="box" class="box"> <div id="title">这是一个测试</div> <div id="list1" class="list"><img src="imgs/1.jpg"></div> <div id="list2" class="list"><img src="imgs/2.jpg"></div> <div id="list3" class="list"><img src="imgs/3.jpg"></div> <div id="list4" class="list"><img src="imgs/4.jpg"></div> </div> <div id="index" class="index"> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </div> <div id="show"></div> </body> </html> <script src="jquery-1.10.2.js"></script> <script src="rgbaster.js"></script> <script> $(function(){ $("#index").find("a").click(function(){ var index=$(this).index()+1; var list=$("#list"+index); list.show(); list.siblings(".list").hide(); var src=list.find("img").attr("src"); RGBaster.colors(src, { paletteSize: 30, // 调色板大小 exclude: [ 'rgb(255,255,255)','rgb(0,0,0)' ], // 为了使取色更合理，排除白色，黑色 success: function(payload) { // payload.dominant是主色，RGB形式表示 // payload.secondary是次色，RGB形式表示 // payload.palette是调色板，含多个主要颜色，数组 var color1=MixColor1(payload.secondary,0.8); var color2=MixColor3(payload.secondary,payload.dominant,0.7); console.log(payload.dominant); $("#title").css("background-color",color2); $("#show").css("background-color",color2); } }); }) }) //与白色按比例进行混合 function MixColor1(rgb,rate){ var regexp = /[0-9]{0,3}/g; var re = rgb.match(regexp); var color1 = []; var color2 = [255,255,255]; var rate1=rate,rate2=1-rate1; for (var i = 0; i < re.length; i++) { var t = re[i]; if(t!==""){ color1.push(parseInt(t)); } } var r=parseInt(color1[0]*rate1+color2[0]*rate2); var g=parseInt(color1[1]*rate1+color2[1]*rate2); var b=parseInt(color1[2]*rate1+color2[2]*rate2); return "rgb("+r+","+g+","+b+")"; } //主色和次色按比例进行混合 function MixColor2(rgb1,rgb2,rate){ var regexp = /[0-9]{0,3}/g; var re1 = rgb1.match(regexp); var re2 = rgb2.match(regexp); var color1 = []; var color2 = []; var rate1=rate,rate2=1-rate1; for (var i = 0; i < re1.length; i++) { var t1 = re1[i]; var t2 = re2[i]; if(t1!==""){ color1.push(parseInt(t1)); color2.push(parseInt(t2)); } } var r=parseInt(color1[0]*rate1+color2[0]*rate2); var g=parseInt(color1[1]*rate1+color2[1]*rate2); var b=parseInt(color1[2]*rate1+color2[2]*rate2); return "rgb("+r+","+g+","+b+")"; } //主色、次色和白色按比例进行混合,白色占比20% function MixColor3(rgb1,rgb2,rate){ var regexp = /[0-9]{0,3}/g; var re1 = rgb1.match(regexp); var re2 = rgb2.match(regexp); var color1 = []; var color2 = []; var color3 = [255,255,255]; var rate1=rate*0.8,rate2=(1-rate)*0.8,rate3=0.2; for (var i = 0; i < re1.length; i++) { var t1 = re1[i]; var t2 = re2[i]; if(t1!==""){ color1.push(parseInt(t1)); color2.push(parseInt(t2)); } } var r=parseInt(color1[0]*rate1+color2[0]*rate2+color3[0]*rate3); var g=parseInt(color1[1]*rate1+color2[1]*rate2+color3[1]*rate3); var b=parseInt(color1[2]*rate1+color2[2]*rate2+color3[2]*rate3); return "rgb("+r+","+g+","+b+")"; } </script>
注：提供三种颜色混合方式，主次混合颜色偏暗，与白色混合颜色偏淡，建议主次白3色混合
Github项目地址是：https://github.com/briangonzalez/rgbaster.js
核心script地址：<script src="http://rawgit.com/briangonzalez/rgbaster.js/master/rgbaster.js"></script>