仿百度首页选项卡切换效果

效果:http://hovertree.com/texiao/jquery/71/代码如下:转自:http://hovertree.com/h/bjaf/n781jmfy.htm特效汇总:http

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

效果:
http://hovertree.com/texiao/jquery/71/

代码如下:

<!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>

转自:http://hovertree.com/h/bjaf/n781jmfy.htm

特效汇总:http://www.cnblogs.com/roucheng/p/texiao.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120521.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • webpack开发环境和生产环境_第二环境问题可以分为

    webpack开发环境和生产环境_第二环境问题可以分为前言如果我们需要使用webpack,就需要依赖node环境nvmnodenpmwebpack@cliwebpacknvm安装nvm是一个用来管理node版本的工具。我们之所以需要使用n

    2022年7月31日
    4
  • 什么是通配符掩码

    什么是通配符掩码通配符掩码(WildcardMask)—通配符掩码(WildcardMask)是一个32位的数量,用在与一个IP地址的联合上来决定在一个IP地址的那个位应该不忽略,在将那个地址与另一个IP地址相比时。一个通配符掩码在设置接入列表时被指定。路由器使用的通配符掩码(或者称作反掩码)与源或目标地址一起来分辨匹配的地址范围,它跟子网掩码刚好相反。它像子网掩码告…

    2022年7月24日
    7
  • 玩转ADB命令(ADB命令使用大全)

    玩转ADB命令(ADB命令使用大全)我相信做Android开发的朋友都用过ADB命令,但是也只是限于安装应用push文件和设备重启相关,根深的也不知道了,其实我们完全可以了解多一点,有一些不常用的场景我们至少应该知道它可以做到,比如,我们知道adbinstall却不知道adbshellamstart。前者是用来安装软件,后者用来打开软件,后者的一个使用场景让我对他重视:公司定制Android系统,在调试屏幕的时候要看是否满屏

    2022年5月13日
    33
  • 微信小程序与php后端交互_微信小程序数据库放哪

    微信小程序与php后端交互_微信小程序数据库放哪这里简单介绍用php后台实现获取openid并保存到数据库;微信的登陆流程是这样的首先前端发送请求到服务器:wx.login({success:function(res){varcode=res.code;//发送给服务器的codewx.getUserInfo({success:function(res){varuserNick=res.userInfo.nickName;…

    2022年9月17日
    0
  • 机房收费系统——组合查询

    机房收费系统——组合查询机房收费系统——组合查询

    2022年4月24日
    35
  • Istio介绍

    服务网格服务网格(ServiceMesh)这个术语通常用于描述构成这些应用程序的微服务网络以及应用之间的交互。随着规模和复杂性的增长,服务网格越来越难以理解和管理。它的需求包括服务发现、负载均衡、故障恢复、指标收集和监控以及通常更加复杂的运维需求,例如A/B测试、金丝雀发布、限流、访问控制和端到端认证等。服务网格的工作Istio将服务请求路由到目的地址,根据中的参数判断是到生产环…

    2022年4月16日
    92

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号