基于jQuery实现仿百度首页选项卡切换效果


Posted in Javascript onMay 29, 2016

以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧。

先给大家展示下效果图:

基于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实现仿百度首页选项卡切换效果,希望对大家有所帮助!

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
jQuery实现图像旋转动画效果
May 29 #Javascript
jQuery中使用animate自定义动画的方法
May 29 #Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 #Javascript
js剪切板应用clipboardData实例解析
May 29 #Javascript
js实现可控制左右方向的无缝滚动效果
May 29 #Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 #Javascript
js省市县三级联动效果实例
Apr 15 #Javascript
You might like
使用 MySQL Date/Time 类型
2008/03/26 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
php字符串截取函数用法分析
2014/11/25 PHP
JS验证日期的格式YYYY-mm-dd 具体实现
2013/06/29 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
python实现简单购物商城
2016/05/21 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
电气技术员岗位职责
2013/11/19 职场文书
家长给学校的建议书
2014/05/15 职场文书
学校节能减排倡议书
2014/05/16 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
购房委托书范本
2014/09/18 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
离婚民事起诉状
2015/08/03 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android