jquery.cookie插件实现网页换肤功能

来源:转载

网页换肤效果就是利用js与css来实现的,当用户点击换时我们利用js不刷新页面给当前页面更新css即可,如果想它刷新之后还是我们设置的皮肤,只要记录在用户cookie中即可。

网页换肤实现原理:

使用jquery.cookie插件将用户操作记录下来,下次访问时直接读取cookie记录(本例中,只用于设置样式)

实例:设置cookie值用于记录.demo标签的id值以模拟“网页换肤”功能的实现,换肤原理思路是一样的!

查看效果方法:点击运行按钮,在新打开的演示页面中随意点击“假装是绿色主题”、“假装是黑色主题”2个链接中的任意一个,.demo标签背景色随之切换,刷新页面或退出浏览器再重新打开,.demo标签背景色仍然保持上次的操作状态不变!

源代码展示:

 

 代码如下 复制代码

<style type="text/css">

.clickBox{width:300px;height:45px;margin:0 auto; text-align:center;padding:10px;}

.demo{width:300px; height:300px; border:1px red solid;margin:0 auto;}

.demo#green{ background:green;}

.demo#black{ background:black;}

</style>

<script type="text/javascript" src="jquery.cookie.js"></script>

 <script type="text/javascript">

$(function(){

 $(".clickBox >a").click(function(){

  $(".demo").attr("id",this.id);

  $.cookie("theme",this.id,{expires:1});//设置cookie变量theme,cookie有效时长是1天  })
 var favCss=$.cookie("theme");
 if(favCss){//假如cookie值存在,直接设置id值以显示背景色
  $(".demo").attr("id",favCss);
  }
 })
</script>
</p>
<div class="clickBox">
 <a href="javascript:;" id="green">假装是绿色主题</a> <a href="javascript:;" id="black">假装是黑色主题</a>
</div>
<div class="demo">
 &nbsp;
</div>




分享给朋友:
您可能感兴趣的文章:
随机阅读: