页面整体在选项卡内的一种导航效果

答案：<!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>
<title>jQuery选项卡风格的页面滑动效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
html,body{font-size:12px;}
#wrap{width:960px;height:660px;border:1px solid #000;margin:0 auto;position:relative;overflow:hidden;}
#wrap .menu{position:absolute;top:10px;left:10px;}
#wrap .menu li{float:left;width:100px;height:30px;line-height:30px;cursor:pointer;}
#wrap .main{position:absolute;top:60px;}
#wrap .main .mbox{float:left;width:960px;height:600px;text-align:center;line-height:600px;color:#fff;}
</style>
<script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
<script type="text/javascript">
$(function(){
	var mw = $(".mbox").width();
	var ml = $(".mbox").length;
	$(".main").width(mw*ml);
	$(".main").css({background:"#f60"})
	$(".menu li").click(function(){
		var index = $(this).index();
		if(index==0){
			$(".main").css({background:"#f60",opacity:0.5})
		}
		if(index==1){
			$(".main").css({background:"#666",opacity:0.5})
		}
		if(index==2){
			$(".main").css({background:"#369",opacity:0.5})
		}
		if(index==3){
			$(".main").css({background:"#c30",opacity:0.5})
		}
		if(index==4){
			$(".main").css({background:"#f00",opacity:0.5})
		}
		if(!$(".main").is(":animated")){
			$(".main").animate({left:-mw*index,opacity:1},800)
		}
	})
})
</script>
</head>
<body>
<div id="wrap">
	<ul class="menu">
    <li>北欧风情1</li>
        <li>德国2</li>
        <li>挪威3</li>
        <li> 阿姆斯特丹4</li>
        <li>卢森堡5</li>
    </ul>
	<div class="main">
    	<div class="m1 mbox">北欧风情1</div>
        <div class="m2 mbox">德国2</div>
        <div class="m3 mbox">挪威3</div>
        <div class="m4 mbox"> 阿姆斯特丹</div>
        <div class="m5 mbox">卢森堡5</div>
    </div>
</div>
</body>
</html>
上一个：jQuery灰-蓝风格标准下拉二级菜单
下一个：仿花瓣网浮动在顶层的导航菜单代码
更多图片编程知识: