基于jQuery实现的仿百度首页滑动选项卡效果代码

本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码。分享给大家供大家参考，具体如下：

今天给大家分享一款基于jQuery的仿百度首页滑动选项卡，可实现标签选项卡内容上下翻滚切换的功能。这款选项卡适用浏览器有：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-f-Baidu-HD-nav-style-codes/

完整实例代码代码点击此处本站下载。

超文本标记语言代码：

div class=' main-page ' div class=' left ' div class=' nav-back '/div class=' nav ' div class=' on '导航/div新闻/div世界杯/div音乐/div彩票/div/div/div class=' right ' div class=' content-back '/div div class=' content ' div站长素材1/div分区站长素材2/分区站长素材3/分区站长素材4/分区站长素材5/div/div/class=' clear '/div/div CSS代码：

正文{背景： URL(图片/65。jpg)无重复固定中心中心；}.清除{ clear:两者；}.主页{ margin: 200px auto 0 auto宽度： 700像素；高度： 300px}。主页。向左，向右。主页。右{左侧浮动： }。主页nav-back { width : 60px；高度： 300像素背景技术： # 000;opa city 3360 . 3 filter : alpha(不透明度=30);}.主页导航{位置：相对；边距-top :-300 px；宽度： 60px文本对齐：中心；font-size : 14px字体系列： '微软雅黑；color: # fff}。主页nav div { height: 32px线高： 28px}.主页{ background: # 0094ea}。主页。右{宽度： 620像素重量： 300像素左边距left: 20px}。主页。内容返回{宽度： 620像素重量： 300像素背景# fffopacity:3}。主页。内容{位置：相对；宽度： 600像素；高度： 280像素；边距-top :-300 px；padding: 10px飞越：隐藏；}.主页内容分区{宽度： 600像素高度： 280像素；边距-底部： 10px背景# fff}js代码：

$('.主页导航区').鼠标输入(function(){ var $ this=$(this)；var索引=$ this。index()；}).鼠标离开(function(){ var $ this=$(this)；var索引=$ this。index()；}).单击(function(){ var $ this=$(this)；var索引=$ this。index()；var l=-(指数* 290);$('.主页导航区').移除CLaSS(' on ')；$('.主页导航区').eq(指数)。添加CLaSS(' on ')；$('.主页内容div:eq(0)').停止()。动画({ 'margin-top': l }，500)；});希望本文所述对大家jQuery程序设计有所帮助。