js网站换肤
只是实现了一个demo，只用了一个css，领会精神即可，能看出效果来采用如下方法，css和image用两套，themeManage.js如下
var defaultTheme=1;function changeTheme(selectedID) {alert("change"+selectedID);themeID=selectedID;var objLinkThemeGlobal=document.getElementById('linkThemeGlobal');var objLinkThemeIndex=document.getElementById('linkThemeIndex');var objLinkThemeDetails=document.getElementById('linkThemeDetails');var objLinkThemeList=document.getElementById('linkThemeList');var objLinkThemeMenu=document.getElementById('linkThemeMenu'); if(objLinkThemeMenu!=null){objLinkThemeMenu.href='./styles/theme' + themeID + '/front/jqueryslidemenu.css';}if(objLinkThemeGlobal!=null){objLinkThemeGlobal.href='./styles/theme' + themeID + '/front/blue.css';}if(objLinkThemeIndex!=null){objLinkThemeIndex.href='./styles/theme' + themeID + '/front/index.css';}if(objLinkThemeDetails!=null){objLinkThemeDetails.href='./styles/theme' + themeID + '/front/details.css';}if(objLinkThemeList!=null){objLinkThemeList.href='./styles/theme' + themeID + '/front/list.css';} oldTheme=getThemeID();document.getElementById('img_theme_'+oldTheme).src='../images/common/theme_'+oldTheme+'_0.gif';document.getElementById('img_theme_'+themeID).src='../images/common/theme_'+themeID+'_1.gif';delCookie('myHntTheme');SetCookie('myHntTheme',themeID);//writeHeaderFlash();//writeBannerFlash();}function getThemeID(){var tid=getCookie('myHntTheme');if(tid==null || tid==''){tid=defaultTheme;}return tid;}function writeStylesheetLinks(_links){themeID = getThemeID();alert(_links.length);for (var i = 0; i < _links.length; i++) {var link = _links;switch (link){case 'linkThemeGlobal':document.writeln("<link id='linkThemeGlobal' href='./styles/theme" + themeID + "/front/blue.css' type='text/css' rel='stylesheet' />");break;case 'linkThemeIndex':document.writeln("<link id='linkThemeIndex' href='./styles/theme" + themeID + "/front/index.css' type='text/css' rel='stylesheet' />");break;case 'linkThemeDetails':document.writeln("<link id='linkThemeDetails' href='./styles/theme" + themeID + "/front/details.css' type='text/css' rel='stylesheet' />");break;case 'linkThemeList':document.writeln("<link id='linkThemeList' href='./styles/theme" + themeID + "/front/list.css' type='text/css' rel='stylesheet' />");break;case 'linkThemeMenu':document.writeln("<link id='linkThemeMenu' href='./styles/theme" + themeID + "/front/jqueryslidemenu.css' type='text/css' rel='stylesheet' />");break;};}}function writeHeaderFlash(onload){themeID = getThemeID();var flash = '\ <object id="HeaderFlashObject" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="1002px" height="145px">\ <param name="allowScriptAccess" value="sameDomain"><param name="movie" value="../images/theme' + themeID + '/front/headbanner.swf"><param name="quality" value="high">\ <param name="menu" value="false"><param name=wmode value="opaque">\ <embed src="../images/theme' + themeID + '/front/headbanner.swf" wmode="opaque" menu="false" quality="high" width ="1002px" height="145px" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\ </object>';if (onload) {document.write(flash);} else {jQuery("#headbanner").empty()if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 7){return;}else{jQuery("#headbanner").html(flash);}}}function writeBannerFlash(onload){themeID = getThemeID();var flash = '\ <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="615px" height="90px">\ <param name="allowScriptAccess" value="sameDomain"><param name="movie" value="../images/theme' + themeID + '/front/banner01.swf"><param name="quality" value="high">\ <param name="menu" value="false"><param name=wmode value="opaque">\ <embed src="../images/theme' + themeID + '/front/banner01.swf" wmode="opaque" menu="false" quality="high" width ="615px" height="90px" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />\ </object>';if (onload) {document.write(flash);} else {if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 7)return;elsejQuery("#dianxin-banner").empty().html(flash);}}//将主题的图片改为“选中”window.onload = function(){var themeID=getThemeID();document.getElementById('img_theme_'+themeID).src='./images/common/theme_'+themeID+'_1.gif';} cookieManage.js代码实现了cookie的管理，代码如下：
// JavaScript Document//此 cookie 将被保存 30 天var Days = 30; //写cookies函数//两个参数，一个是cookie的名子，一个是值function SetCookie(name,value){ var exp= new Date(); //new Date("December 31, 9998"); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();}//取cookies函数 function getCookie(name){ var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr != null) return unescape(arr); return null;}//删除cookiefunction delCookie(name){ var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval=getCookie(name); if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();} index.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>无标题文档</title><script type="text/javascript" src="./scripts/common/cookieManage.js"></script><script type="text/javascript" src="./scripts/common/themeManage.js"></script><script type="text/javascript" >writeStylesheetLinks(["linkThemeGlobal"]);</script></head><body><div class="topnav"><div class="topnav_but"></div><ul> <li>2009年1月6日 星期四 </li></ul><div class="topnav_font"> <div class="topnav_font_left"></div><div class="topnav_font_right"></div></div><div class="control_area"> <div class="control_area_left"></div> <div class="control_area_content01"><a href="#" target="_blank">恢复默认</a></div> <div class="control_area_content02"><a href="#" target="_blank">添加内容</a></div> <div class="control_area_content03"><a href="javascript:changeTheme(1);"><img src="images/theme_1_0.gif" id="img_theme_1" alt="清新蓝" border="0"/></a></div> <div class="control_area_content03"><a href="javascript:changeTheme(2);"><img src="images/theme_2_0.gif" id="img_theme_2" alt="清新绿" border="0"/></a></div> <div class="control_area_content03"><a href="javascript:changeTheme(3);"><img src="images/topnav_themes_blue.gif" id="img_theme_3" alt="清新紫" border="0"/></a></div> <div class="control_area_right"></div></div></div> 如果谁有更好，更简单的实现方法还请指教！！
页:
[1]