jQuery实现网站换肤功能特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现网站换肤功能特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(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" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery实现网站换肤功能，属于站长常用代码" />
<title>jQuery实现网站换肤功能</title>
<script src="js/jquery-1.2.6.pack.js" type=text/javascript></script>
<script src="js/styleswitch.js" type=text/javascript></script>
<link title=css1 href="style/s1_1.css" type=text/css rel=stylesheet>
<link title=css2 href="style/s1_2.css" type=text/css rel=stylesheet>
<link title=css3 href="style/s1_3.css" type=text/css rel=stylesheet>
</head>
<body>
	<div id="container">
		<div class="box">
			<input type="text" class="text"><button class="btn01">搜索</button>
		</div>
		<div class="bs">
			<a class="styleswitch a1" style="CURSOR: pointer" title="黄" rel=css1></a>
			<a class="styleswitch a2" style="CURSOR: pointer" title="绿" rel=css2></a> 
			<a class="styleswitch a3" style="CURSOR: pointer" title="蓝" rel=css3></a>		
		</div>
	</div>
</body>
</html>

JS代码(styleswitch.js):

/*** Styleswitch stylesheet switcher built on jQuery* Under an Attribution,Share Alike License* By Kelvin Luck ( http://www.kelvinluck.com/ )**/
$(document).ready(function(){
	$('.styleswitch').click(function(){
	switchStylestyle(this.getAttribute("rel"));
	return false;
}
);
	var c = readCookie('style');
	if (c) switchStylestyle(c);
}
);
	function switchStylestyle(styleName){
	$('link[@rel*=style][@title]').each(function(i){
	this.disabled = true;
	if (this.getAttribute('title') == styleName) this.disabled = false;
}
);
	createCookie('style',styleName,365);
}
// cookie functions http://www.quirksmode.org/js/cookies.htmlfunction createCookie(name,value,days){
	if (days){
	var date = new Date();
	date.setTime(date.getTime()+(days*24*60*60*1000));
	var expires = ";
	expires="+date.toGMTString();
}
else var expires = "";
	document.cookie = name+"="+value+expires+";
	path=/";
}
function readCookie(name){
	var nameEQ = name + "=";
	var ca = document.cookie.split(';
	');
	for(var i=0;
	i < ca.length;
	i++){
	var c = ca[i];
	while (c.charAt(0)==' ') c = c.substring(1,c.length);
	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name){
	createCookie(name,"",-1);
}
// /cookie functions

CSS代码(s1_1.css):

@import url(public.css);#container{width:950px;position:relative;margin:0 auto;}
.box{padding-top:11px;padding-left:10px;background:url(../images/searchbg01.jpg) no-repeat;width:940px;height:47px;}
.text{padding-left:10px;width:160px;height:18px;line-height:18px;border:1px solid #ccc;float:left;}
.btn01{display:block;background:url(../images/btn-hua.gif) no-repeat;width:77px;height:18px;padding-bottom:4px;border:none;color:#fff;cursor:pointer;letter-spacing:2px;display:inline;margin-left:5px;margin-top:2px;line-height:18px;font-size:13px;}
.bs{position:absolute;left:780px;top:18px;}
.bs a{display:block;width:10px;height:9px;margin-right:10px;float:left;display:inline;}
.bs .a1{background:url(../images/hua2.gif) no-repeat;}
.bs .a2{background:url(../images/lv.gif) no-repeat;}
.bs .a3{background:url(../images/lan.gif) no-repeat;}

附件:下载该文件资源,减少时间成本(增值服务)