您的位置：首页 > 其它

标题栏背景色随背景图片自适应

2015-08-27 18:24 302 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航