XML:CSS基础之四

来源：互联网发布：财务记账软件免费版编辑：程序博客网时间：2024/05/16 15:11

用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元素是否含有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>

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;
}

效果演示如下: