`

js网站换肤

    博客分类：
  • js
CSSjQueryFlashJavaScriptXHTML 
阅读更多

只是实现了一个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[i];
		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;
		else
			jQuery("#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[2]); return null;

}

//删除cookie
function 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>

 如果谁有更好，更简单的实现方法还请指教！！

分享到：
| log4j的使用
评论
5 楼 pure1202 2009-05-11  
我先看看了
4 楼 wyl232 2009-03-05  
feelsky 写道

写的不错~

应该还有更简单的，希望知道的不要吝啬，share一下
3 楼 wyl232 2009-03-05  
xiaoyijack 写道

好像漏东西了吧，只有清新蓝 能正确显示

那个只有一个css ，另一种css没有加上，领会精神即可
2 楼 xiaoyijack 2009-02-13  
好像漏东西了吧，只有清新蓝 能正确显示
1 楼 feelsky 2009-01-14  
写的不错~
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    网站换肤实例 js+css动态为整站换肤

    总结，通过合理的CSS预设和JavaScript动态切换，我们可以实现网站的动态换肤功能。这不仅可以提高用户满意度，也可以展示网站的个性化和专业性。在实际开发中，还需注意性能优化、兼容性和安全性，以提供最佳的用户...

    简单的JS网页换肤示例

    在网页设计中，换肤功能可以为用户提供个性化的体验，使他们可以根据个人喜好调整网站的外观。本示例主要展示了如何使用JavaScript（JS）和jQuery实现这一功能。jQuery是一个广泛使用的JavaScript库，它简化了DOM...

    css+js实现网站换肤

    在"css+js实现网站换肤"的场景下，我们将探讨如何利用CSS（层叠样式表）和JavaScript来实现这一功能。 首先，CSS是网页设计中的关键部分，用于定义元素的外观、布局和结构。在换肤功能中，我们可以创建多个CSS文件...

    网页换肤JS

    网页换肤JS是一种常见的前端技术，它允许用户在不刷新页面的情况下改变网站的外观和感觉，为用户提供个性化的浏览体验。这项技术主要依赖JavaScript（JS）脚本语言，结合HTML、CSS以及可能的图片资源来实现。下面...

    js+css网站换肤

    解析时下流行的网站一键换肤,希望能为需要的朋友带去一些帮助!

    .net网站换肤的设计原理

    网站换肤的设计原理 这些都是我在做网站的时候在网上搜到的 可能有帮助网站换肤的设计原理 这些都是我在做网站的时候在网上搜到的 可能有帮助网站换肤的设计原理 这些都是我在做网站的时候在网上搜到的 可能有帮助...

    利用JS实现背景换肤

    在本文中，我们将深入探讨如何利用JavaScript（JS）来实现网页背景换肤的功能，类似于QQ空间的个性化设置。背景换肤是提升用户交互体验的重要手段，它允许用户根据个人喜好自定义网页的视觉样式，从而增加用户的参与...

    js网页换肤

    网页换肤是网页设计中一个常见且有趣的功能，它允许用户根据个人喜好改变网站的外观和风格。在JavaScript（简称JS）的帮助下，我们可以轻松实现这一功能。以下将详细讲解如何利用JavaScript实现网页换肤。 首先，...

    jQuery实现网站换肤功能

    5. `js`：这个文件夹可能包含JavaScript代码，特别是实现换肤逻辑的脚本。 6. `style`：很可能包含了不同皮肤的CSS文件，如`skin1.css`, `skin2.css`, `skin3.css`等。 实现换肤功能的基本步骤如下： 1. **引入...

    jQuery实现网站换肤功能.zip

    1. `&lt;head&gt;`部分：引入jQuery库（可能通过CDN链接）以及项目中的`js`目录下的脚本文件，如`skin.js`，这个脚本文件包含了实现换肤功能的JavaScript代码。 2. `&lt;body&gt;`部分：可能包含一个或多个用于切换皮肤的按钮，...

    js实现百度首页的换肤功能

    JavaScript，简称为“JS”，是一种轻量级的解释性编程语言，广泛应用于网页和网络应用开发，特别是实现客户端的交互式行为。在本案例中，我们关注的是如何使用JavaScript实现百度首页的换肤功能，这涉及到用户界面...

    无刷新换肤JS代码

    【标题】：“无刷新换肤JS代码”是指在网页中实现用户选择皮肤后，无需重新加载页面即可实时更换网站主题颜色或布局的JavaScript代码。这种技术通常通过Ajax异步通信来实现，使得用户体验更加流畅。 【描述】：...

    js+css实现换肤功能

    在网页设计中，换肤功能是一项常见的用户交互设计，它允许用户根据个人喜好选择不同的界面样式，提升用户体验。本文将详细讲解如何利用...通过以上步骤，你可以为你的网站或应用增添个性化的换肤功能，提升用户满意度。

    js+css换肤demo

    在本文中，我们将深入探讨如何使用JavaScript（JS）和Cascading Style Sheets（CSS）来实现网站的换肤功能。换肤功能允许用户根据个人喜好选择不同的界面样式，提升用户体验。我们将从以下几个方面来详细讲解这个...

    js换肤功能

    JavaScript（简称JS）换肤功能是网页应用中常见的设计，它允许用户根据个人喜好选择不同的主题或风格，提升用户体验。实现这一功能的关键在于利用JS动态修改页面元素的样式，并通过Cookie来持久化用户的皮肤选择，...

    js 5种颜色网页换肤测试程序

    在这个“js 5种颜色网页换肤测试程序”中，我们将会探讨如何利用JavaScript实现网页皮肤的动态切换，让用户体验不同的视觉效果。 首先，让我们了解换肤的基本原理。网页换肤通常是通过更改CSS样式或替换背景图像来...

    网站换肤

    源码是指编程语言编写的未经编译或解释的原始程序代码，对于网站换肤，源码可能包括CSS样式表、JavaScript脚本和服务器端代码。开发者通常会设计一套核心样式，并提供额外的主题样式文件，用户选择不同的皮肤时，...

    js实现网页换肤

    在网页设计中，提供换肤功能可以为用户提供个性化的体验，让网站更加吸引人。JavaScript（简称js）作为客户端脚本语言，非常适合用于实现这样的动态效果。本文将深入讲解如何利用JavaScript来实现网页换肤的功能。 ...

    网站整站换肤源码（demo）

    在网站换肤中，可以通过JavaScript监听用户的换肤选择，然后修改`&lt;link&gt;`标签的`href`属性，指向新的CSS文件，从而实时更新页面样式。 3. **存储用户偏好**： - 为了保存用户的皮肤选择，通常会使用Cookie、...

Magicbox
Global site tag (gtag.js) - Google Analytics