今天给大家分享一款基于jQuery的仿百度首页滑动选项卡。这款选项卡适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   源码下载

实现的代码。

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>
站长素材1</div>
<div>
站长素材2</div>
<div>
站长素材3</div>
<div>
站长素材4</div>
<div>
站长素材5</div>
</div>
</div>
<div class="clear">
</div>
</div>

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

js代码:

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

via:http://www.w2bc.com/Article/17820

一款基于jQuery的仿百度首页滑动选项卡的更多相关文章

  1. 基于jquery hover图片遮罩层滑动

    分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  2. 一款基于jQuery仿淘宝红色分类导航

    今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览    ...

  3. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  4. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  5. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

  6. 一款基于jQuery饼状图比例分布数据报表

    今天给大家带来一款基于jQuery饼状图比例分布数据报表.这款报表插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览  ...

  7. 10款基于jquery实现的超酷动画源码

    1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽.但今天要介绍的这款j ...

  8. 10款基于jquery的web前端特效及源码下载

    1.jQuery时间轴插件:jQuery Timelinr 这是一款可用于展示历史和计划的时间轴插件,尤其比较适合一些网站展示发展历程.大事件等场景.该插件基于jQuery,可以滑动切换.水平和垂直滚 ...

  9. 8款基于Jquery的WEB前端动画特效

    1.超炫酷的30个jQuery按钮悬停动画 按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的是30个超炫酷的jQuery悬停按钮动画,当我们将鼠标滑过按钮 ...

随机推荐

  1. [置顶] 手把手教你iOS消息推送证书生成以及Push消息

    iOS推送消息是许多iOS应用都具备的功能,今天在给应用加推送功能,在生成证书的过程中,发生了各种令人蛋痛的事.下面就把步骤拿出来分享下: iOS消息推送的工作机制可以简单的用下图来概括: Provi ...

  2. idea bug集合

    问题1:点击debug调试时会报下面这种错误 Error running tomcat: Unable to open debugger port (127.0.0.1:64582): java.ne ...

  3. 简单计算器 安卓 Android 作业

    Android老师布置的课程作业——简单计算器 功能要求实现四则运算,参考界面见下图: 首先给各位老铁提供apk安装包以及项目压缩包,略表诚意~ github地址:https://github.com ...

  4. mac下Fiddler的安装-启动

    使用教程参考:http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html#request 环境安装 Mono安装 首先,Mac下需要 ...

  5. 『Python CoolBook』使用ctypes访问C代码_上_用法讲解

    一.动态库文件生成 源文件hello.c #include "hello.h" #include <stdio.h> void hello(const char *na ...

  6. 解放你生产力的10款效率工具,赶紧mark起来

    聪明的人总是善用工具 社会的快度发展赋予我们的一个幸运之处在于:你可以通过读书或使用工具去改善自身的处境甚至是阶层. 在父母那个时代,通过熟练使用办公软件,可以使一个在水泥地做帮工的青年走进格子间.而 ...

  7. nginx根据url中的参数进行转发

    在实际项目中,由于https安全策略,我们无法直接跳转到我们想要跳转到的地址 例如 url:https://abc.dc.com/image?url=https://vpic.video.qq.com ...

  8. Django权限auth模块详解

    转自:http://www.cnblogs.com/Finley/p/5575305.html 1,auth模块是Django提供的标准权限管理系统,可以提供用户身份认证,用户组和权限管理 2,aut ...

  9. mac使用brew安装sshpass

    brew安装sshpass brew install https://raw.githubusercontent.com/kadwanev/bigboybrew/master/Library/Form ...

  10. hdu 5461(2015沈阳网赛 简单暴力) Largest Point

    题目;http://acm.hdu.edu.cn/showproblem.php?pid=5461 题意就是在数组中找出a*t[i]*t[i]+b*t[j]的最大值,特别注意的是这里i和i不能相等,想 ...