jQuery菜单切换页面背景js代码

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

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

以下是 jQuery菜单切换页面背景js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<title>jQuery�˵��л�ҳ�汳��</title>
<!--<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="shadow.js"></script>
<script type="text/javascript" src="javascript.js"></script>

</head>
<body>

<ul id="menu">
	<li><a href="" name="home">Home</a></li>
	<li><a href="" name="about">About</a></li>
	<li><a href="" name="services">Services</a></li>
</ul>

<div id="home">
	<div class="content">
		
	</div>
</div>
<div id="about">
	<div class="content">
		
	</div>
</div>
<div id="services">
	<div class="content">
		
	</div>
</div>

</body>
</html>

JS代码(javascript.js):

$(document).ready(function (){
	// Marks whether an animation is currently running var animationsRunning = 0;
	// Initial window width var initialWidth = $(window).width();
	// Function wrapping code. var wrapFunction = function (fn,context,params){
	return function (){
	fn.apply(context,params);
}
;
}
;
	// Global function queue var funqueue = [];
	// An array of the items to animate var objects ={
	'home':'vertical','about':'horizontal','services':'slide'}
function generateSlice(mainContainer,direction){
	// Get some core variables var direction = direction var mainContainer = $('#' + mainContainer);
	var sliceWidth = 90;
	// Get the height and width of the window currently var height = screen.height;
	var width = screen.width;
	// Change the width and height of the container to the height and width of the window mainContainer.css({
	'width':width + 'px','height':height + 'px'}
);
	//Add a container called 'slices' to every container. if (mainContainer.find('.slices').length < 1){
	mainContainer.append('<div class="slices"></div>');
}
// An incremental variable var incr = 0;
	var theShadow = $(mainContainer).find('endShadow');
	// Determine which style to apply if (direction == 'vertical'){
	mainContainer.addClass('vertical');
	// If vertical,we need to add vertical slices. if (mainContainer.find('.vertical').length < 1){
	mainContainer.children('.slices').append('<div class="vertical"></div>');
}
// Divide the screen width by the slice width to get the number of slices. // Then loop this so we add a slice until x = the number of slices. for (x = 0;
	x < (width / sliceWidth);
	++x){
	mainContainer.find('.vertical').append('<div class="slice"> </div>');
}
}
else if (direction == 'horizontal'){
	mainContainer.addClass('horizontal');
	// If horizontal,horizontal slices! if (mainContainer.find('.horizontal').length < 1){
	mainContainer.children('.slices').append('<div class="horizontal"></div>');
}
for (x = 0;
	x < (height / sliceWidth);
	++x){
	mainContainer.find('.horizontal').append('<div class="slice" style="top:' + incr + 'px;
	"> </div> ');
	incr = incr + 90;
}
}
else if (direction = 'slide'){
	mainContainer.addClass('slide');
	//For sliding,we need extra containers if (mainContainer.find('.left-slices').length < 1){
	mainContainer.children('.slices').append('<div class="left-slices"></div>').prepend('<div class="right-slices"></div>');
}
//Then run a for statement to ensure the slices go to the correct container for (x = 0;
	x < (height / sliceWidth);
	++x){
	mainContainer.find('.left-slices').append('<div class="slice" style="top:' + incr + 'px;
	left:-50%;
	"> </div>');
	mainContainer.find('.right-slices').append('<div class="slice" style="top:' + incr + 'px;
	right:-50%;
	"> </div>');
	incr = incr + 90;
}
}
}
$.each(objects,function (k,v){
	generateSlice(k,v);
}
);
	// This function completely restarts any animation that // we will run. function restartAnimation(item){
	$item = item.parent('div').parent('div').parent('div');
	item.css({
	'box-shadow':''}
).removeClass('noshadow');
	if ($item.hasClass('horizontal')){
	item.css({
	'right':'100%'}
);
}
else if ($item.hasClass('slide')){
	if (item.parent('.left-slices').length > 0){
	item.css({
	'left':'-50%'}
);
}
else{
	item.css({
	'right':'-50%'}
);
}
}
else if ($item.hasClass('vertical')){
	item.css({
	'top':'100%'}
);
}
}
// Run the animations! function animation(container,direction){
	if (animationsRunning > 0){
	return false;
}
// Remove current slide class and z index. $('body > div').css({
	'z-index':''}
);
	$('body > div').removeClass('current-slide');
	// Fade out content$('.content').fadeOut();
	// The length of the animation var aLength = 500;
	var direction = direction;
	var animationType;
	// Set container variable $container = $('#' + container);
	// Change z index. $container.css({
	'z-index':'10'}
);
	$container.addClass('current-slide');
	$container.find('.slice').each(function (){
	// A random time so that the slices slide in at different times var randTime = Math.floor(Math.random() * (aLength + 100)) + (aLength - 100);
	// If the direction is vertical then change the animation if (direction == 'vertical'){
	animationType ={
	'top':'0%'}
;
}
else if (direction == 'horizontal'){
	animationType ={
	'right':'0%'}
;
	// Since there are two sides to the slide animation we run it separately.}
else if (direction == 'slide'){
	if ($(this).parent('.left-slices').length > 0){
	animationsRunning += 1;
	$(this).animate({
	'left':'0%'}
,randTime,function (){
	$(this).animate({
	'boxShadow':'none'}
);
	setTimeout(function (){
	$('body > div:not(#' + container + ') .slice').each(function (){
	restartAnimation($(this));
}
);
	$container.find('.content').fadeIn();
	animationsRunning -= 1;
	if (animationsRunning < 1 && funqueue.length > 0){
	(funqueue.shift())();
}
}
,(aLength+200));
}
);
}
else if ($(this).parent('.right-slices').length > 0){
	animationsRunning += 1;
	$(this).animate({
	'right':'0%'}
,randTime,function (){
	$(this).animate({
	'boxShadow':'none'}
);
	setTimeout(function (){
	$('body > div:not(#' + container + ') .slice').each(function (){
	restartAnimation($(this));
}
);
	$container.find('.content').fadeIn();
	animationsRunning -= 1;
	if (animationsRunning < 1 && funqueue.length > 0){
	(funqueue.shift())();
}
}
,(aLength+200));
}
);
}
}
if (animationType != null){
	// Animation is running animationsRunning += 1;
	// Run animation $(this).animate(animationType,randTime,function (){
	// Remove box shadow at end of animation $(this).animate({
	'boxShadow':'none'}
);
	// Wait a little while setTimeout(function (){
	// For ease I'm just selecting first level divs that are not the current// animated div and restarting the animation for each of their slices. $('body > div:not(#' + container + ') .slice').each(function (){
	restartAnimation($(this));
}
);
	// Fade in the content div $container.find('.content').fadeIn();
	// Animation is no longer running animationsRunning -= 1;
	// If the animation is not running but there are still functions in the // queue then shift to the text animation if (animationsRunning < 1 && funqueue.length > 0){
	(funqueue.shift())();
}
}
,(aLength+200));
}
);
}
}
);
}
// The menu $('#menu a').click(function (){
	// If the name attribute is 'home' if ($(this).attr('name') == 'home'){
	// And the animation is not running if (animationsRunning < 1){
	// Then animate home vertically animation('home','vertical');
}
else{
	// Otherwise the animation is running,so remove everything from the queue to// stop function buildup and add this function to the queue so it happens next funqueue.length = 0;
	funqueue.push(wrapFunction(animation,this,['home','vertical']));
}
// Otherwise check the next elements name attribute}
else if ($(this).attr('name') == 'about'){
	if (animationsRunning < 1){
	animation('about','horizontal');
}
else{
	funqueue.length = 0;
	funqueue.push(wrapFunction(animation,this,['about','horizontal']));
}
}
else if ($(this).attr('name') == 'services'){
	if (animationsRunning < 1){
	animation('services','slide');
}
else{
	funqueue.length = 0;
	funqueue.push(wrapFunction(animation,this,['services','slide']));
}
}
// Return false so the anchor doesn't act like a regular anchor return false;
}
);
	// Run the home animation at the start since it is the first page $('#menu [name=home]').addClass('current-slide');
	animation('home','vertical');
}
);

CSS代码(style.css):

body{padding:0;margin:0;background:#000;overflow:hidden;}
body > div{position:absolute;top:0;left:0;}
/* MENU STUFF ================= */
#menu{position:absolute;z-index:12;list-style:none;padding:0;margin:0;top:20px;left:20px;background:#fff;padding:10px;}
.current{background:black;color:#fff !important;border-bottom:1px solid #000 !important;}
.current:hover{color:#fff;}
#menu li a{border-bottom:1px solid #eee;font-family:Arial,sans-serif;width:250px;padding:10px;display:block;text-decoration:none;text-transform:uppercase;color:#000;}
#menu li a:hover{background:#000;color:#fff;border-bottom:1px solid #000;}
/* END MENU STUFF =========================== */
.content{position:absolute;top:0;left:0;display:none;z-index:11;}
.before-slices,#home .after-slices{display:inline-block;height:inherit;text-transform:lowercase;}
#home .slice{display:inline-block;position:relative;background:#fff;z-index:inherit;box-shadow:0px 0px 20px rgba(0,0,0,0.1);font-weight:bold;}
#about .slice{background:#fff337;}
#services .slice{background-color:#47bcf2;}
.endShadow{box-shadow:none !important;}
.slices,.vertical,.horizontal{width:inherit;height:inherit;}
.vertical .slice{height:inherit;top:100%;width:90px;}
.horizontal .slice{position:absolute;top:0;right:100%;width:inherit;height:90px;z-index:inherit;box-shadow:0px 0px 20px rgba(0,0,0,0.1);font-weight:bold;text-transform:capitalize;}
.slice{position:absolute;text-transform:lowercase;}
.left-slices,.right-slices{height:inherit;width:50%;display:inline-block;}
.left-slices .slice,.right-slices .slice{width:inherit;box-shadow:0px 0px 20px rgba(0,0,0,0.1);height:90px;width:50%;font-style:italic;}

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