jquerycookie插件轻松实现切换背景颜色-创新互联
#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;}
$(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':'/'});
});
});
});
green
red
yellow
blue
lightgreen
pink
orange
gold
purple
×
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻名称:jquerycookie插件轻松实现切换背景颜色-创新互联
网页地址:http://pwwzsj.com/article/iepde.html