转 JQuery网页换肤

先是html代码：

XML/HTML代码
  1. <div id="header_demo">  
  2.     <a id="logo" href="#">Rainweb</a>  
  3.         <ul id="skin">  
  4.             <li id="skin_0" title="蓝色" class="selected">蓝色</li>  
  5.             <li id="skin_1" title="紫色">紫色</li>  
  6.             <li id="skin_2" title="红色">红色</li>  
  7.             <li id="skin_3" title="天蓝色">天蓝色</li>  
  8.             <li id="skin_4" title="橙色">橙色</li>  
  9.             <li id="skin_5" title="淡绿色">淡绿色</li>  
  10.         </ul>  
  11. </div>  

 

 

CSS代码：

CSS代码
  1. /*头部样式开始*/  
  2. #header_demo{  
  3.     width:700px;   
  4.     height:80px;   
  5.     border: 1px solid #AAAAAA;  
  6.     margin:10px auto;   
  7.     /** background:#3B5998; **/  
  8. }  
  9. /*logo样式开始*/  
  10. #logo {   
  11.     float:left;   
  12.     margin:0 0 0 10px;   
  13.     color:#FFF;   
  14.     font-size:3em;   
  15.     font-weight:700;  
  16.     line-height:80px;  
  17. }  
  18. /*切换皮肤样式*/  
  19. #skin {   
  20.     float:rightright;   
  21.     margin:10px;   
  22.     padding:4px;   
  23.     width:120px;   
  24.     list-style:none;   
  25.     border: 1px solid #CCCCCC;   
  26.     background:#FFF;  
  27. }  
  28. #skin li {   
  29.     float:left;   
  30.     margin-right:4px;   
  31.     width:15px;   
  32.     height:15px;   
  33.     text-indent:-9999px;   
  34.     overflow:hidden;   
  35.     display:block;   
  36.     cursor:pointer;   
  37.     background-image:url(images/theme.gif);   
  38. }  
  39. #skin_0 { background-position:0px 0px; }  
  40. #skin_1 { background-position:15px 0px; }  
  41. #skin_2 { background-position:35px 0px; }  
  42. #skin_3 { background-position:55px 0px; }  
  43. #skin_4 { background-position:75px 0px; }  
  44. #skin_5 { background-position:95px 0px; }  
  45. #skin_0.selected { background-position:0px 15px; }  
  46. #skin_1.selected { background-position:15px 15px; }  
  47. #skin_2.selected { background-position:35px 15px; }  
  48. #skin_3.selected { background-position:55px 15px; }  
  49. #skin_4.selected { background-position:75px 15px; }  
  50. #skin_5.selected { background-position:95px 15px; }  

 

javascript代码：

JavaScript代码
  1. //网站换肤  
  2. $(function () {  
  3.     var $li = $("#skin li");  //查找到元素  
  4.     $li.click(function () {   //给元素添加事件  
  5.         switchSkin(this.id);//调用函数  
  6.     });  
  7.     //保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了  
  8.     var cookie_skin = $.cookie("MyCssSkin");     //获取Cookie的值  
  9.     if (cookie_skin) {                          //如果确实存在Cookie  
  10.         switchSkin(cookie_skin);     //执行  
  11.     }  
  12. });  
  13. function switchSkin(skinName) {     
  14.     $("#" + skinName).addClass("selected")                //当前<li>元素选中  
  15.                        .siblings().removeClass("selected");  //去掉其他同辈<li>元素的选中  
  16.     $("#cssfile").attr("href", "css/skin/" + skinName + ".css"); //设置不同皮肤  
  17.     $.cookie("MyCssSkin", skinName, { path: '/', expires: 10 });  //保存Cookie  
  18.     alert(skinName);  
  19. }  

 

最后就是一个link文件：

XML/HTML代码
  1. <link id="cssfile" type="text/css" href="css/skin/skin_5.css" rel="Stylesheet">  

 

演示地址    下载地址

posted @ 2011-12-15 19:55  leejersey  阅读(412)  评论(0)  编辑  收藏  举报