漂亮的网站风格切换

from:http://www.nowamagic.net/jquery/jquery_AmazingjQueryStyleSwitcher.php

DEMO : http://www.nowamagic.net/jquery/examples/StyleSwitcher/index.php#

 

style-switcher.php

<?php
	$style = $_GET['style'];
	setcookie("style", $style, time()+604800);
	if(isset($_GET['js'])) 
	{
		echo $style; 
	} 
	else 
	{
		header("Location: ".$_SERVER['HTTP_REFERER']);
	}
?>

 index.php

 

 

 

 

 

<?php 
	if(!empty($_COOKIE['style'])) 
		$style = $_COOKIE['style'];
	else 
		$style = 'day';
?>

<link id="stylesheet" type="text/css" href="css/<?php echo $style ?>.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/styleswitcher.jquery.js"></script>

<div id="container">
	<h1>Style-Switcher Example</h1>
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	
    <div id="banner"></div>
	<div id="content">
		<h2>NETTUTS Tutorial Example</h2>
		<p>This is an example of an obtrusive and entirely degradable jQuery style switcher. You can try it out by choosing from the choices (at very top of page).</p>
	</div>
	
    <div id="foot">
	<p><a href="#link-to-tut">Tutorial</a> by <a href="http://nettuts.com/author/james/">James Padolsey</a></p>
	</div>
	
    <div id="style-switcher">
	<h4>Choose your style:</h4>
	<ul>
		<li id="day"><a href="style-switcher.php?style=day">Day</a></li>
		<li id="night"><a href="style-switcher.php?style=night">Night</a></li>
	</ul>
	</div>
</div>
<script type="text/javascript">
	$('#style-switcher a').styleSwitcher();
</script>

 

styleswitcher.jquery.js

jQuery.fn.styleSwitcher = function()
{
	$(this).click(function()
    {
		loadStyleSheet(this);
		return false;
	});
	function loadStyleSheet(obj) 
    {
		$('body').append('<div id="overlay" />');
		$('body').css({height:'100%'});
		$('#overlay')
			.css({
				display: 'none',
				position: 'absolute',
				top:0,
				left: 0,
				width: '100%',
				height: '100%',
				zIndex: 1000,
				background: 'black url(img/loading.gif) no-repeat center'
			})
			.fadeIn(500,function(){
				$.get( obj.href+'&js',function(data){
					$('#stylesheet').attr('href','css/' + data + '.css');
					cssDummy.check(function(){
						$('#overlay').fadeOut(500,function(){
							$(this).remove();
						});	
					});
				});
			});
	}
	var cssDummy = {
		init: function(){
			$('<div id="dummy-element" style="display:none" />').appendTo('body');
		},
		check: function(callback) {
			if ($('#dummy-element').width()==2) callback();
			else setTimeout(function(){cssDummy.check(callback)}, 200);
		}
	}
	cssDummy.init();
}

 然后随用户切换 day.css 和 night.css。