jQuery仿百度首页滑动选项卡滑动滚动特效代码

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

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

以下是 jQuery仿百度首页滑动选项卡滑动滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

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=utf-8" />
<title>jQuery仿百度首页滑动选项卡代码</title>
<style type="text/css">
body{background:url(images/65.jpg) no-repeat fixed center center;}
.clear{clear:both;}
.main-page{margin:200px auto 0 auto;width:700px;height:300px;}
.main-page .left, .main-page .right{float:left;}
.main-page .nav-back{width:60px;height:300px;background:#000;opacity:.3;filter:alpha(opacity=30);}
.main-page .nav{position:relative;margin-top:-300px;width:60px;text-align:center;font-size:14px;font-family:"微软雅黑";color:#fff;}
.main-page .nav div{height:32px;line-height:28px;}
.main-page .nav div.on{background:#0094ea;}
.main-page .right{width:620px;height:300px;margin-left:20px;}
.main-page .content-back{width:620px;height:300px;background:#fff;opacity:.3;}
.main-page .content{position:relative;width:600px;height:280px;margin-top:-300px;padding:10px;overflow:hidden;}
.main-page .content div{width:600px;height:280px;margin-bottom:10px;background:#fff;}
</style>

</head>
<body>

<div class="main-page">
	<div class="left">
		<div class="nav-back"></div>
		<div class="nav">
			<div class="on">导航</div>
			<div>新闻</div>
			<div>世界杯</div>
			<div>音乐</div>
			<div>彩票</div>
		</div>
	</div>
	<div class="right">
		<div class="content-back"></div>
		<div class="content">
			<div>内容1</div>
			<div>内容2</div>
			<div>内容3</div>
			<div>内容4</div>
			<div>内容5</div>
		</div>
	</div>
	<div class="clear"></div>
</div>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(".main-page .nav div").mouseenter(function () {
	var $this = $(this);
	var index = $this.index();
}).mouseleave(function () {
	var $this = $(this);
	var index = $this.index();
}).click(function () {
	var $this = $(this);
	var index = $this.index();
	var l = -(index * 290);
	$(".main-page .nav div").removeClass("on");
	$(".main-page .nav div").eq(index).addClass("on");
	$(".main-page .content div:eq(0)").stop().animate({ "margin-top": l }, 500);
});
</script>
</body>
</html>

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