test页面
<html>
<head>
<link href="1/1.css" rel="stylesheet" type="text/css" id="setSkin" />
<style>
.s_current {background:red;}
</style>
<script language="javascript">
var skin={
_skinRef:document.getElementById("setSkin"),
_ctrls:document.getElementsByTagName("span"),
_srcs:["0/0.css",
"1/1.css",
"2/2.css",
"3/3.css",
"4/4.css",
"5/5.css"],
_cookieName:"NTES_SKIN",
setCookie:function(cookieName,cookieValue){
var today = new Date();
var expires = new Date();
expires.setTime(today.getTime() + 1000 * 60 * 60 * 24 * 365);
document.cookie = cookieName + "=" + escape(cookieValue) + "; expires=" + expires.toGMTString();
},
save:function(i){
this.setCookie(this._cookieName,i);
},
change:function(i){
var t=this,pos=i;
if(pos>=0&&pos<t._srcs.length){
t._skinRef.href=t._srcs[pos];
for(var m = 0;m<this._ctrls.length;m++)
{
this._ctrls[m].style.background = (m==pos ? "red":"#FFFFFF");
}
t.save(pos);
}
},
getCookie:function(Name){
var search = Name + "=";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) {
end = document.cookie.length;
}
return unescape(document.cookie.substring(offset, end));
}
else
{
return ("");
}
}
else {
return ("");
}
},
init:function(){
var t=this,pos=parseInt(this.getCookie(t._cookieName));
if(!isNaN(pos)){t.change(pos);}
for(var index=0;index< t._ctrls.length;index++){
(function(x){
t.addEvent(t._ctrls[x],'click', function(e){
t.change(x);
});
})(index);
}
},
addEvent:function( obj, type, fn ) {
if(obj.addEventListener)
{
obj.addEventListener(type,fn,false);
}
else if(obj.attachEvent){
obj["e"+type+fn]=fn;
obj[type+fn]=function(){obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type,obj[type+fn]);
}
}
};
</script>
</head>
<body>
<div class="skinBar" id="changeSkin">
<span class="s_yellow" title="黄色主题">黄色主题</span>
<span class="s_blue" title="蓝色主题">蓝色主题</span>
<span class="s_gray" title="灰色主题">灰色主题</span>
<span class="s_coffee" title="咖啡色主题">咖啡色主题</span>
<span class="s_green" title="绿色主题">绿色主题</span>
<span class="s_pink" title="粉色主题">粉色主题</span>
</div>
<div id="colorChange">这里边颜色会变化</div>
<div id="imgChange"></div>
<div id="login"></login>
<a href="">aaaaaaaaaaaaaaaa</a>
<a href="">bbbbbbbbbbbbbbbb</a>
<a href="">cccccccccccccccc</a>
<a href="">dddddddddddddddd</a>
<a href="">eeeeeeeeeeeeeeee</a>
</body>
</html>
<script>
skin.init();
</script>
样式文件夹1
一个样式文件1.css
#colorChange {
background-color:red;
}
#imgChange {
border: 1px solid red;
background-image:url(img/a.png);
width:200px;height:100px;
}
body{
font-size : 13px;
}
a{
color:#006600;
}
a:hover{
color:green;
text-decoration: none;
}
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
