`

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...

    js+css网站换肤

    ### JavaScript + CSS 实现网站换肤功能详解 随着互联网技术的发展和用户体验需求的不断提高，网站换肤功能成为了许多网站提高用户粘性和个性化体验的重要手段之一。本文将详细解析如何使用JavaScript和CSS技术来...

    css+js实现网站换肤

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

    网页换肤JS

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

    .net网站换肤的设计原理

    ### .NET网站换肤设计原理详解 在网页设计与开发领域，网站换肤（或称为皮肤切换）是一项提升用户体验、增强网站个性化的重要功能。本文将深入探讨网站换肤的设计原理，特别是针对.NET平台下的实现方法，包括CSS...

    利用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