jQuery之网页换肤实现代码


Posted in Javascript onApril 30, 2011

下面是代码:
首先HTML页面代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Jacob Song的购物网站</title> 
<link rel="Stylesheet" href="css/header.css" type="text/css" /> 
<link rel="Stylesheet" href="css/skin/skin_0.css" type="text/css" id="cssfile" /> 
</head> 
<body> 
<script language="javascript" src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<!--引用了一个Cookie插件,您可以下载Cookie插件,也可以用我的源代码插件,下面有下载的--> 
<script language="javascript" src="Scripts/jquery.cookie.js" type="text/javascript"></script> 
<!--这是Scripts文件夹中的核心代码ChangeSkin.js--> 
<script language="javascript" src="Scripts/ChangeSkin.js" type="text/javascript"></script> 
<div id="header"> 
<a id="logo" href="#">我的购物网站</a> 
<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> 
</div> 
</body> 
</html>

CSS文件,对应HTML
/*头部样式开始*/ 
#header{ 
width:800px; 
height:80px; 
border: 1px solid #AAAAAA; 
margin:10px auto; 
background:#3B5998; 
} 
/*logo样式开始*/ 
#logo { 
float:left; 
margin:0 0 0 10px; 
color:#FFF; 
font-size:3em; 
font-weight:700; 
line-height:80px; 
} 
/*切换皮肤样式*/ 
#skin { 
float:right; 
margin:10px; 
padding:4px; 
width:120px; 
list-style:none; 
border: 1px solid #CCCCCC; 
background:#FFF; 
} 
#skin li { 
float:left; 
margin-right:4px; 
width:15px; 
height:15px; 
text-indent:-9999px; 
overflow:hidden; 
display:block; 
cursor:pointer; 
background-image:url(../Imgs/theme.gif); 
} 
#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; } 
#skin_1.selected { background-position:15px 15px; } 
#skin_2.selected { background-position:35px 15px; } 
#skin_3.selected { background-position:55px 15px; } 
#skin_4.selected { background-position:75px 15px; } 
#skin_5.selected { background-position:95px 15px; }

然后你还要有一些备用的CSS,就是换肤所需要的,当你点击时,它们用的CSS是不同的,然后选中后,保存在Cookie中,在CSS文件夹下Skin文件夹中有备用的换肤的CSS样式
Skin_0.css文件如下:
#header{ 
background:#3B5998; 
}

Skin_1.css文件如下:
#header{ 
background:#BB3BD9; 
}

Skin_2.css文件如下:
#header{ 
background:#E31559; 
}

Skin_3.css文件如下:
#header{ 
background:#08BECE; 
}

Skin_4.css文件如下:
#header{ 
background:#FBA60A; 
}

Skin_5.css文件如下:
#header{ 
background:#AFD400; 
}

其实可以看出简单的,就是颜色不同,日后根据需要可以添加更多的样式,这里只是一个例子供大家参考,
当你完成上面的工作后,就可以运行了,本文只是很简单的演示换肤的,您可以下载源代码:
点击下载源代码
Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
js数组依据下标删除元素
Apr 14 Javascript
js文字横向滚动特效
Nov 11 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
vue-cli3.0 环境变量与模式配置方法
Nov 08 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 #Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 #Javascript
推荐20家国外的脚本下载网站
Apr 28 #Javascript
JavaScript中的this实例分析
Apr 28 #Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 #Javascript
JavaScript中获取未知对象属性的代码
Apr 27 #Javascript
JavaScript之HTMLCollection接口代码
Apr 27 #Javascript
You might like
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python pandas库的安装和创建
2019/01/10 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
员工拾金不昧表扬信
2014/01/09 职场文书
关于毕业的广播稿
2014/01/10 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
先进个人申报材料
2014/12/30 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
阿凡达观后感
2015/06/10 职场文书
工作证明格式范文
2015/06/15 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书