用jquery实现换肤的效果

最新推荐文章于 2021-06-17 02:45:57 发布

natalie86

最新推荐文章于 2021-06-17 02:45:57 发布

阅读量6.1k

点赞数 3

分类专栏： jquery 文章标签： jquery cookie

本文链接：https://blog.csdn.net/natalie86/article/details/43528423

版权

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

摘要由CSDN通过智能技术生成

看了《锋利的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>