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面向对象之四 继承
Feb 08 Javascript
ajax的hide隐藏问题解决方法
Dec 11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
HTML+JS实现在线朗读器
Feb 15 Javascript
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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
php 生成随机验证码图片代码
2010/02/08 PHP
PHP 代码规范小结
2012/03/08 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP全功能无变形图片裁剪操作类与用法示例
2017/01/10 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JavaScript使用slice函数获取数组部分元素的方法
2015/04/06 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
2015/08/28 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
javascript获取元素的计算样式
2019/05/24 Javascript
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
大学生个人求职信范文
2013/09/21 职场文书
高中毕业自我鉴定
2013/12/19 职场文书
音乐器材管理制度
2014/01/31 职场文书
前处理班长职位说明书
2014/03/01 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
社区党员公开承诺书
2014/08/30 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书