网页换肤实现原理：
使用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"> </div> |
|
时间： 2024-09-28 09:02:06