基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单，所以没给大家附太多的注释，有问题欢迎给我留言，具体详情请看下文代码吧。
先给大家展示下效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿百度首页选项卡切换效果 - 何问起</title>
<base target="_blank" />
<style type="text/css">
body {
background: url(http://hovertree.com/texiao/jquery/71/images/65.jpg) no-repeat fixed center center;
}
.hovertreepage .clear {
clear: both;
}
.hovertreepage {
margin: 200px auto 0 auto;
width: 700px;
height: 300px;
}
.hovertreepage .left, .hovertreepage .right {
float: left;
}
.hovertreepage .nav-back {
width: 60px;
height: 300px;
background: #000;
opacity: .3;
filter: alpha(opacity=30);
}
.hovertreepage .nav {
position: relative;
margin-top: -300px;
width: 60px;
text-align: center;
font-size: 14px;
font-family: "微软雅黑";
color: #fff;
}
.hovertreepage .nav div {
height: 32px;
line-height: 28px;
cursor:pointer;
}
.hovertreepage .nav div.on {
background: #0094ea;
}
.hovertreepage .right {
width: 620px;
height: 300px;
margin-left: 20px;
}
.hovertreepage .content-back {
width: 620px;
height: 300px;
background: #fff;
opacity: .3;
}
.hovertreepage .content {
position: relative;
width: 600px;
height: 280px;
margin-top: -300px;
padding: 10px;
overflow: hidden;
}
.hovertreepage .content a{color:blue;}
.hovertreepage .content div {
width: 600px;
height: 280px;
margin-bottom: 10px;
background: #fff;
}
</style>
</head>
<body>
<div class="hovertreepage">
<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 <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/n781jmfy.htm">原文</a>
</div>
<div>2 </div>
<div>3 <a href="http://hovertree.com/texiao/jquery/70/color.htm">服装店风云</a> 自从接触编程以后，兴趣就一直有增无减。</div>
<div>4 <a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery全部版本下载</a>
时间就是金钱，效率就是生命。
</div>
<div>5 <a href="http://hovertree.com/texiao/html5/30/"><img src="http://hovertree.com/hvtimg/bjafjd/wmt3mxd7.png" alt="孙悟空" /></a></div>
</div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(".hovertreepage .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);
$(".hove"+"rtreepage .nav div").removeClass("on");
$(".hovertreepage .nav div").eq(index).addClass("on");
$(".hovertreepage .content div:eq(0)").stop().animate({ "margin-top": l }, 500);
});
</script>
</body>
</html>
以上内容是小编给大家介绍的基于jQuery实现仿百度首页选项卡切换效果，希望对大家有所帮助！
相关推荐
-
jQuery实现选项卡切换效果简单演示
本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c
-
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实现最简单的选项卡切换效果
这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh
-
jQuery实例—选项卡的简单实现(js源码和jQuery)
分别利用javascript的源码和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"> &l
-
jquery实现具有嵌套功能的选项卡
关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容. 通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容. 代码如下: <head> <meta charset="gb2312"> <title>jquery选项卡</title> <style type="text/
-
jquery编写Tab选项卡滚动导航切换特效
本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=
-
基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&
-
基于jQuery实现仿百度首页换肤背景图片切换代码
不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- 在线预览 源码下载 html代码: <a href="#">换肤</a> <div class="heitiao"></div> <div class="con"><img src="images/content.png" /></div> &l
-
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码.分享给大家供大家参考.具体如下: 这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果,其实是一款伸缩菜单,只不过这个菜单有点特别,只从一头向另一头伸展出去,菜单的伸缩效果平滑,设计精美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI
-
基于javascript实现最简单的选项卡切换效果
本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &
-
基于Jquery实现仿百度百科右侧导航代码附源码下载
先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示 源码下载 代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
-
简单易用的基于jQuery版仿新浪微博向下滚动效果(附DEMO)
简单易用的jQuery 写的仿新浪微博 向下滚动效果 $(function(){ var scrtime; $("#con").hover(function(){ clearInterval(scrtime); },function(){ scrtime = setInterval(function(){ var $ul = $("#con ul"); var liHeight = $ul.find("li:last").height(); $u
-
基于jquery的仿百度的鼠标移入图片抖动效果
1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码 代码如下: <div id ="task-intro-box"><!--活动说明--></div> <div id ="task-awards"><!--活动奖励--></div> <div id ="
-
基于jquery的仿百度搜索框效果代码
先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT
-
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
第一种方法: 复制代码 代码如下: $(document).ready(function () { $(':input:text:first').focus(); $(':input:enabled').addClass('enterIndex'); // get only input tags with class data-entry textboxes = $('.enterIndex'); // now we check to see which browser is being use