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
×
本文标题:jquerycookie插件轻松实现切换背景颜色
URL标题:http://ybzwz.com/article/gdshoj.html