基于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 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 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模板解析类实例
2015/07/09 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
Using the TextRange Object
2006/10/14 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
运动会100米广播稿
2015/08/19 职场文书
外出培训学习心得体会
2016/01/18 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书