4行代码实行JQuery向上滑动选项卡

1588

效果图:

QQ图片20151018222129.png

下面是代码部分:

Css:

<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>


HTML代码:

<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>玄玄 博客</div>
<div>玄玄 博客</div>
<div>玄玄 博客</div>
<div>玄玄 博客</div>
<div>玄玄 博客</div>
</div>
</div>
<div class="clear"></div>
</div>
JQuery代码:
//这个一个缺点就是 $this.index() * 290 290应该是动态获取才完美!!不管了。喜欢的自己改吧 哈哈!
//点击事件
$(".main-page .nav div").click(function () {
var $this = $(this);//定义自己
$(".main-page .nav div").removeClass("on");
$(".main-page .nav div").eq($this.index()).addClass("on");//自己加上on
$(".main-page .content div:eq(0)").stop().animate({ "margin-top": -($this.index() * 290) }, 500);//第一个div * 290 往上移就可以实现了。就是这么简单...
});
</script>

玄玄 博客 www.blogxuan.com