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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
js实现目录定位正文示例
Nov 14 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
javascript生成随机数的方法
May 16 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP parse_ini_file函数的应用与扩展操作示例
2019/01/07 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
浅入深出Vue之自动化路由
2019/08/06 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
Vue的Options用法说明
2020/08/14 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
经济管理专业自荐信
2013/12/30 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
求职信格式范文
2015/03/19 职场文书
证婚人致辞精选
2015/07/28 职场文书
2019年入党思想汇报
2019/03/25 职场文书
Java数组与堆栈相关知识总结
2021/06/29 Java/Android
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
正则表达式基础与常用验证表达式
2022/06/16 Javascript