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


Posted in Javascript onNovember 16, 2015

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

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

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

在线演示地址如下:

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

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

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
如何在wxml中直接写js代码(wxs)
Nov 14 Javascript
uniapp实现横向滚动选择日期
Oct 21 Javascript
vue实现简单数据双向绑定
Apr 28 Vue.js
每天一篇javascript学习小结(Function对象)
Nov 16 #Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 #Javascript
实例代码详解jquery.slides.js
Nov 16 #Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 #Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 #Javascript
常用javascript表单验证汇总
Jul 20 #Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 #Javascript
You might like
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php实现在新浪云中使用imagick生成缩略图并上传的方法
2016/09/26 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
霸气队列口号
2014/06/18 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
golang中的并发和并行
2021/05/08 Golang
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python