<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>更换背景颜色</title>
<style type="text/css">
#bg{width: 90%;height: 500px;background: rgba(0,0,0,.2);position: fixed;bottom: 10px;left: 0;right: 0;margin:auto;display: none;border: 5px solid #fff;}
.close{width: 30px;height: 30px;border: 2ps solid;line-height: 30px;text-align: center;color: #fff;background: #000;position: absolute;right: 0;top: 0;font-size: 25px;}
.color{width: 200px;height: 100px;border: 1px solid #fff;float: left;margin:20px 35px;line-height: 100px;text-align: center;color: #fff;font-size: 30px;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.12.4.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.cookie.js"></script>
<script type="text/javascript">
$(function(){
var bgcolor = $.cookie('bgcolor'); //从cookie中读取背景颜色
if(bgcolor){
document.body.style.backgroundColor = bgcolor; //显示cookie中已经存在的颜色
$('#bg').css('backgroundColor','rgba(255,255,255,.7)'); //将id为bg的div背景色改为半透明的白色
}
$('#btn').on('click',function(){
$('#bg').show();
});
$('.close').on('click',function(){
$('#bg').hide();
});
//获取class为color的元素,并设置背景色
$('.color').each(function(index,element){
var bgcolor = $(element).text();
$(this).css('backgroundColor',bgcolor);
$(element).on('click',function(){
document.body.style.backgroundColor = bgcolor;
$.cookie('bgcolor',bgcolor,{'expires':30,'path':'/'});
});
});
});
</script>
</head>
<body>
<button id="btn">切换皮肤</button>
<div id="bg">
<span class="color">green</span>
<span class="color">red</span>
<span class="color">yellow</span>
<span class="color">blue</span>
<span class="color">lightgreen</span>
<span class="color">pink</span>
<span class="color">orange</span>
<span class="color">gold</span>
<span class="color">purple</span>
<strong class="close">×</strong>
</div>
</body>
</html>
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
