jquery cookie插件轻松实现切换背景颜色

发布时间:2020-07-22 04:20:16 作者:大大果
来源:网络 阅读:820

<!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 src="jquery-1.12.4.js"></script>

<script src="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>


附件:http://down.51cto.com/data/2368259
推荐阅读:
  1. JQuery——常用插件
  2. 使用jQuery UI插件实现切换主题功能——经验小结

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

插件 cookie jquery

上一篇:MySQL 5.6通过MMM实现读写分离的高可用架构

下一篇:使用纯CSS实现圣诞节雪花图案

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》