首先,换肤设计要保证皮肤更改的信息能够存在cookie里,使得用户下次访问的时候还能够看到自己上次的设置。这里换肤我们用到的是通过js调用不同的样式。然而在我们正在做的系统中,我们用到了IFRAME,要保证整体页面的一致,我们还要考虑从父页面给IFRAM的子页面加载样式文件。下面先给出JS:


function $(obj) {
return document.getElementById(obj);
}
var skin = {};
skin.addEvent = function() {
var skins = $("skin").getElementsByTagName("span");
for (i = 0; i < skins.length; i++) {
skins[i].onclick = function() { skin.setSkin(this.id.substring(5)) };
}
}
//设置Cookie值,可以参考我的博客http://www.cnblogs.com/shineqiujuan/archive/2008/09/17/1292647.html
skin.setCookie = function(n) {
var expires = new Date();
expires.setTime(expires.getTime() + 24 * 60 * 60 * 365 * 1000);
var flag = "Skin_Cookie=" + n;
document.cookie = flag + ";expires=" + expires.toGMTString();
}
//以下是读Cookie值的方法,可以参考我的博客http://www.cnblogs.com/shineqiujuan/archive/2008/09/17/1292647.html
skin.readCookie = function() {
var skin = 0
var mycookie = document.cookie;
var name = "Skin_Cookie";
var start1 = mycookie.indexOf(name + "=");
if (start1 == -1) {
skin = 0;
}
else {
var start = mycookie.indexOf("=", start1) + 1;
var end = mycookie.indexOf(";", start);
if (end = -1) {
end = mycookie.length;
}
var values = unescape(mycookie.substring(start, end));
if (values != null) {
skin = values;
}
}
return skin;
}
//设置皮肤样式,其实是调用已经准备好的样式表
skin.setSkin = function(n) {
var skins = $("skin").getElementsByTagName("span");
for (i = 0; i < skins.length; i++) {
skins[i].className = "";
}
skin.setCookie(n);
try {
$("skin_" + n).className = "selected";
$("cssfile").href = "css/all" + n + ".css";
// iframe_left.document.getElementsByTagName("link")[0].href = "css/all" + n + ".css";
}
catch (ex) {
$("skin_" + 0).className = "selected";
$("cssfile").href = "css/all" + 0 + ".css";
// iframe_left.document.getElementsByTagName("link")[0].href = "css/all" + 0 + ".css";
}
}
//最先的入口,先读cookie
window.onload = function() {
skin.setSkin(skin.readCookie());
skin.addEvent();
}
整个系统中一共准备了6套样式,分别为all0,all1,...all5;在第一套样式中定义好系统默认的样式,其他的样式分别对要改变的元素进行不同的样式设置。
而在CSS当中也用到了简单的滑动门技术:


1

2



3

4

5

6

7

8

9

10

11

12

13

14

15



16

17

18

19

20

21

22

23

24

25

26

27



28

29

30



31

32

33



34

35

36



37

38

39



40

41

42



43

44

45



46

47

48



49

50

51



52

53

54



55

56

57



58

59

60



61

62

63

64


点击的图片如下:
而在系统中显示的图片如下:
相应的代码为:
Code
<ul id="skin">
<li id="skin_5" title="紫色">紫色</li>
<li id="skin_4" title="灰色">灰色</li>
<li id="skin_3" title="粉红">粉红</li>
<li id="skin_2" title="绿色">绿色</li>
<li id="skin_1" title="蓝色">蓝色</li>
<li id="skin_0" title="橙色">橙色</li>
</ul>
这样一来,就实现了系统的换肤效果。