用jquery实现换肤的效果

灰太狼 2022-08-06 15:21 196阅读 0赞

看了《锋利的jquery》做了一个网页换肤的练习。效果如图：

![Center][]点选上面的色卡选项，下面相应的标签就会随之变色。

html的结构仍然是用ul和li包裹色卡

这里把li元素的id都设为skin\_0后面跟序号 。之后会有用。并且用类名为selected标注选中的色卡。

引用了2个外部的CSS文件，一个是默认的全局的CSS，另一个是各皮肤的CSS。先来说默认的全局的CSS，这里给li加了个背景图![Center 1][]

然后分别根据每个 li的id，用background-position来定位找到相应的颜色块。以及被选中的li的样式也是同样的方法找到定位背景部分，代码如下：

#skin_0{
    	background-position:0px 0px;
    }
    #skin_1{
    	background-position:15px 0px;
    }
    #skin_2{
    	background-position:35px 0px;
    }
    #skin_3{
    	background-position:55px 0px;
    }
    #skin_4{
    	background-position:75px 0px;
    }
    #skin_5{
    	background-position:95px 0px;
    }
    #skin_0.selected{
    	background-position:0px 15px !important;
    }
    #skin_1.selected{
    	background-position:15px 15px !important;
    }
    #skin_2.selected{
    	background-position:35px 15px !important;
    }
    #skin_3.selected{
    	background-position:55px 15px !important;
    }
    #skin_4.selected{
    	background-position:75px 15px !important;
    }
    #skin_5.selected{
    	background-position:95px 15px !important;
    }

再来说不同皮肤的CSS，这里根据6个颜色一共建立6个颜色值的CSS文件，CSS文件名和li的id名相同，然后再在页面中引用，

这里加了个id，之后在JQ里可以动态加载CSS文件。

最后再来分析下JQ。这里建立了一个换肤的函数。

function switchSkin(skinName){
        $("#"+skinName).addClass("selected").siblings().removeClass('selected');
    $("#cssfile").attr('href', 'css/'+skinName+'.css');
    
    $.cookie("MyCssSkin",skinName,{path:'/',expires:10});
    }

这里传的参数skinName就是li的id名，

$("#cssfile").attr('href', 'css/'+skinName+'.css');

这里动态加载了各皮肤的CSS，这里就体现出了把id名和CSS的名字设为一样的好处了。

这里用了一个基于jquery的jQuery.Cookie.js插件是一个轻量级的Cookie管理插件

创建cookie

$.cookie("MyCssSkin",skinName,{path:'/',expires:10});

获取cookie的值

var cookie_skin=$.cookie("MyCssSkin");
      if(cookie_skin){
        switchSkin(cookie_skin);
      }

最后再给li加一个点击事件，调用switchSkin()这个方法就实现了整个效果

[Center]: /images/20220805/7d24b35eb0ae4e89a707dae27544b507.png
[Center 1]: /images/20220805/435508bda263411fa7853597d04292fa.png