用jquery实现换肤的效果

最新推荐文章于 2025-08-03 15:57:53 发布

原创最新推荐文章于 2025-08-03 15:57:53 发布 · 6.1k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #cookie

jquery 专栏收录该内容

38 篇文章

订阅专栏

本文通过《锋利的jQuery》的实例，介绍如何实现网页换肤效果。利用jQuery和CSS，当用户选择色卡选项时，页面相应标签会随之改变颜色。默认全局CSS设置li的背景图并通过background-position定位颜色，当选中li时应用相应样式。同时，创建多个皮肤CSS文件，文件名与li id匹配，并在页面中引入。借助jQuery.Cookie.js插件管理用户的皮肤选择偏好。

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

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

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

	<ul id="skin">
		<li id="skin_0" title="灰色" class="selected">灰色</li>
		<li id="skin_1" title="紫色">紫色</li>
		<li id="skin_2" title="红色">红色</li>
		<li id="skin_3" title="天蓝色">天蓝色</li>
		<li id="skin_4" title="橙色">橙色</li>
		<li id="skin_5" title="浅绿色">浅绿色</li>
	</ul>

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

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

然后分别根据每个 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名相同，然后再在页面中引用，

<link href="css/skin_0.css" rel="stylesheet" id="cssfile"/>

这里加了个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()这个方法就实现了整个效果