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

2024-12-12 01:30:01

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

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

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-f-baidu-hd-nav-style-codes/

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

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程序设计有所帮助。

jquery仅用6行代码实现滑动门效果

本文实例讲述了jquery仅用6行代码实现滑动门效果.分享给大家供大家参考.具体如下: 这是一个基于jQuery的滑动门导航栏,仅6行代码,不知还有没有比此更少的代码了,在滑动门的实现过程中,用背景图片修饰了每个"门"的背景,更美观漂亮,有着极好的用户操作体验. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-nav-menu-style-codes/ 具体代码如下: <!DOCTYPE html P
jQuery实现类似滑动门切换效果的层切换

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
jQuery实现仿腾讯迷你首页选项卡效果代码

本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的选项卡,清爽无修饰版,仿腾讯的迷你首页.选项卡的前后可以有一个控件箭头,点击这两个箭头可控件选项卡向左.向右滚动,在有限的网页空间内布局更多的内容成为可能,相信你会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/ 具体代码如下: <!DOCT
jQuery实现的多滑动门，多选项卡效果代码

本文实例讲述了jQuery实现的多滑动门,多选项卡效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
jQuery实现TAB选项卡切换特效简单演示

本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
jquery实现经典的淡入淡出选项卡效果代码

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
jquery实现标题字体变换的滑动门菜单效果

本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html
jquery实现具有嵌套功能的选项卡

关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容. 通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容. 代码如下: <head> <meta charset="gb2312"> <title>jquery选项卡</title> <style type="text/
jQuery实现的经典滑动门效果

本文实例讲述了jQuery实现的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一款jQuery 滑动门,从样式上来说,虽然有些古板,但已经具备了经典的滑动门功能,感兴趣的朋友可以继续美化一下界面. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-hd-move-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
基于jquery自己写tab滑动门(通用版)

css: 复制代码代码如下: .main { height:360px; width:290px; border:1px solid #444444; font-size:12px; color:#444444; margin:20px; } .main_top { height:30px; width:290px; line-height:30px; text-align:left; background-color:#999999; border-bottom:1px solid #444
EasySlider 基于jQuery功能强大简单易用的滑动门插件

Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.所以,基本上你只需要链接这个插件文件后,设置好内容,然后样式化CSS就可以了.EasySlider的功能支持横向或纵向滑动支持自动滚动支持连续滑动 "上一屏"和"下一屏按钮" "到第一屏"和"最后一屏"按钮隐藏的控制可选的控制按钮包围标记同一页面可支持多个滑动门可设置
jQuery实现自动切换播放的经典滑动门效果

本文实例讲述了jQuery实现自动切换播放的经典滑动门效果.分享给大家供大家参考.具体如下: 这是一个滑动门代码,从外观上看,简洁经典,似乎与平时见到的滑动门没什么区别,不过它有一个重要的功能与众不同,那就是会自动切换[播放]滑动门的内容,像腾讯QQ登录后弹出的每日要闻一样,如果你再加以美化,那么就更完美无暇了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/ 具体代码如下: <!

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

相关推荐

随机推荐