用JAVASCRIPT+CSS實現換膚
ex002.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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS圖象濾鏡_變換CSS</title>
<link rel="stylesheet" type="text/CSS" title="主題A" href="ex002a.css" />
<link rel="alternate stylesheet" type="text/CSS" title="主題B" href="ex002b.css" />
<script type="text/javascript">
function setStyle(title) {
//預定義變量
var i, links;
//用DOM方法獲得所有的link元素
links= document.getElementsByTagName("link");
for(i=0; links[i]; i++) {
//判斷此link元素的rel屬性中是否有style關鍵字
//即此link元素是否為樣式表link
//同時判斷此link元素是否含有title屬性
if(links[i].getAttribute("rel").indexOf("style") != -1
&& links[i].getAttribute("title")) {
//先不管三七二十一把它設為disabled
links[i].disabled = true;
//再判斷它的title中是否有我們指定的關鍵字
if(links[i].getAttribute("title").indexOf(title) != -1)
//如果有則將其激活
links[i].disabled = false;
}
}
}
</script>
</head>
<body>
<div class="bg">
<p align="center"><img src="245352.jpg" width="400" height="300" class="img" /></p>
<p align="center"><input type="button" value="主題A" onclick="setStyle('主題A');" />
<input type="button" value="主題B" onclick="setStyle('主題B');" />
</p>
</div>
</body>
</html>
ex002a.css
.img {
filter: Alpha(Opacity=80, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=400, FinishY=300);
}
.bg {
background-color: #336600;
margin: 0px;
}
.text {
filter:wave(Add="0",Phase="4",Freq="2",LightStrength="2",Strength="2");
font-family: "宋體";
font-size: 12pt;
font-weight: bolder;
position: absolute;
color: #FF9900;
left: 571px;
top: 315px;
}
.btn {
font-weight: bold;
background-color: #33CCFF;
}
ex002b.css
.img {
filter: Alpha(Opacity=30, FinishOpacity=0, Style=2, StartX=0, StartY=0, FinishX=400, FinishY=300);
}
.bg {
background-color: #FFCC33;
margin: 0px;
}
.text {
filter:blur(add=1,direction=135,strength=2）;
font-family: "宋體";
font-size: 12pt;
font-weight: bolder;
position: absolute;
left: 571px;
top: 315px;
color: #339999;
}
.btn {
font-weight: bold;
background-color: #99CC66;
}
效果演示如下:
XML:CSS基礎之四