页面导航：首页 → 网络编程 → JavaScript → 应用技巧 → 正文内容

[换皮肤程序]一个比较使用的脚本程序

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

<!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>换肤测试程序</title> 
<style type="text/css"> 
.themes{border:1px solid #000;} 
</style> 
<script language="javascript" type="text/javascript"> 
<!-- 
var arrCSS=[ 
    ["<img src='http://www.east-dragon.cn/code/changeskin/images/ocean.gif' width='16' height='8' class='themes' alt='Ocean'>","http://www.east-dragon.cn/code/changeskin/css/ocean.css"], 
    ["<img src='http://www.east-dragon.cn/code/changeskin/images/tangerine.gif' width='16' height='8' class='themes' alt='Tangerine'>","http://www.east-dragon.cn/code/changeskin/css/tangerine.css"], 
    ["<img src='http://www.east-dragon.cn/code/changeskin/images/violet.gif' width='16' height='8' class='themes' alt='Violet'>","http://www.east-dragon.cn/code/changeskin/css/violet.css"], 
    ["<img src='http://www.east-dragon.cn/code/changeskin/images/oyster.gif' width='16' height='8' class='themes' alt='Oyster'>","http://www.east-dragon.cn/code/changeskin/css/oyster.css"], 
    ["<img src='http://www.east-dragon.cn/code/changeskin/images/grass.gif' width='16' height='8' class='themes' alt='Grass'>","http://www.east-dragon.cn/code/changeskin/css/grass.css"], 
    "" 
    ];

// *** function to replace href="#" *** 
function v(){ 
    return; 
}

// *** Cookies *** 
function writeCookie(name, value) {  
    exp = new Date();  
    exp.setTime(exp.getTime() + (86400 * 1000 * 30)); 
    document.cookie = name + "=" + escape(value) + "; expires=" + exp.toGMTString() + "; path=/";  
}  
function readCookie(name) {  
    var search;  
    search = name + "=";  
    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 ""; 
    } 
}

//////////////////////////////////// 
// StyleSheet 
//////////////////////////////////// 
function writeCSS(){ 
  for(var i=0;i<arrCSS.length;i++){ 
    document.write('<link title="css'+i+'" href="'+arrCSS[i][1]+'" rel="stylesheet" disabled="true" type="text/css" />'); 
  } 
    setStyleSheet(readCookie("stylesheet")); 
}

function writeCSSLinks(){ 
  for(var i=0;i<arrCSS.length-1;i++){ 
    if(i>0) document.write('  '); 
    document.write('<a href="javascript:v()" onclick="setStyleSheet(\'css'+i+'\')">'+arrCSS[i][0]+'</a>'); 
  } 
}

writeCSS(); 
setStyleSheet(readCookie("stylesheet"));

// 隐藏显示换肤框 
function ShowHideDiv(init) { 
    if(document.getElementById("Sright").style.display == "block"){ 
         document.getElementById("Sright").style.display = "none"; 
  } 
  else{ 
      document.getElementById("Sright").style.display = "block"; 
  } 
} 
//--> 
</script> 
</head> 
<body> 
<div class="topNav"></div> 
<div class="blank4"></div> 
<div class="skin"> 
     <div id="page_options" onclick="ShowHideDiv()"> 
     皮肤设置选项 
     <div id="Sright"> 
          颜色：<script type="text/javascript">writeCSSLinks();</script> 
     </div> 
     </div> 
</div> 
<div class="blank4"></div> 
<div class="NewsBody"> 
     <div class="CoLeft"> 
          <div class="clear"></div> 
     </div> 
     <div class="CoCenter"> 
          <div class="CConter"></div>     
     <div class="clear"></div> 
     </div> 
     <div class="CoRight"> 
          <div class="clear"></div> 
     </div> 
<div class="clear"></div>      
</div> 
<div class="blank4"></div> 
<div class="footer"></div> 
</body> 
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：[换皮肤程序]一个比较使用的脚本程序