html制作百度首页hover,基于jQuery实现仿百度首页选项卡切换效果

以下代码比较简单，所以没给大家附太多的注释，有问题欢迎给我留言，具体详情请看下文代码吧。

先给大家展示下效果图：

代码如下：

jQuery仿百度首页选项卡切换效果 - 何问起

body {

background: url(http://hovertree.com/texiao/jquery/71/images/65.jpg) no-repeat fixed center center;

}

.hovertreepage .clear {

clear: both;

}

.hovertreepage {

margin: 200px auto 0 auto;

width: 700px;

height: 300px;

}

.hovertreepage .left, .hovertreepage .right {

float: left;

}

.hovertreepage .nav-back {

width: 60px;

height: 300px;

background: #000;

opacity: .3;

filter: alpha(opacity=30);

}

.hovertreepage .nav {

position: relative;

margin-top: -300px;

width: 60px;

text-align: center;

font-size: 14px;

font-family: "微软雅黑";

color: #fff;

}

.hovertreepage .nav div {

height: 32px;

line-height: 28px;

cursor:pointer;

}

.hovertreepage .nav div.on {

background: #0094ea;

}

.hovertreepage .right {

width: 620px;

height: 300px;

margin-left: 20px;

}

.hovertreepage .content-back {

width: 620px;

height: 300px;

background: #fff;

opacity: .3;

}

.hovertreepage .content {

position: relative;

width: 600px;

height: 280px;

margin-top: -300px;

padding: 10px;

overflow: hidden;

}

.hovertreepage .content a{color:blue;}

.hovertreepage .content div {

width: 600px;

height: 280px;

margin-bottom: 10px;

background: #fff;

}

导航

新闻

世界杯

音乐

彩票

1 首页 特效 原文

2

3 服装店风云 自从接触编程以后，兴趣就一直有增无减。

4 jQuery全部版本下载

时间就是金钱，效率就是生命。

5

$(".hovertreepage .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);

$(".hove"+"rtreepage .nav div").removeClass("on");

$(".hovertreepage .nav div").eq(index).addClass("on");

$(".hovertreepage .content div:eq(0)").stop().animate({ "margin-top": l }, 500);

});

以上内容是小编给大家介绍的基于jQuery实现仿百度首页选项卡切换效果，希望对大家有所帮助！