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

效果: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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Eclipse 安装 SVN 插件的两种方法「建议收藏」

    Eclipse 安装 SVN 插件的两种方法「建议收藏」Eclipse 安装 SVN 插件的两种方法

    2022年4月23日
    95
  • 简单的udp攻击_udp flood攻击

    简单的udp攻击_udp flood攻击由于本人很菜,这个代码是改别人的.呵呵.可以在公司的局域网里搞搞坏,呵呵.我是在ubuntu8.04下的,需要gcc编译.这个也添加了广播,整个网段的人都能收到了#include#include#include#include//ip#include//tcp#include#includeunsignedshortip_su…

    2022年10月2日
    0
  • oSIP协议栈浅析

    oSIP协议栈浅析1.oSIP介绍2.oSIP结构分析2.1oSIP结构2.2状态机(FiniteStateMachines)模块2.2.1 概述2.2.2ICT状态机2.2.3NICT状态机2.2.4IST状态机2.2.5NIST状态机2.3解析器(Parsers)模块2.3.

    2022年6月16日
    60
  • 前端必备技能之如何制作精灵图「建议收藏」

    前端必备技能之如何制作精灵图「建议收藏」为什么要用精灵图?比如京东首页的这些icon,如果每个icon都去请求一个资源。是非常浪费资源的。因为我们浏览器在同一个域名下并发加载的资源(CSS、JS、图片等)数量是有限的。我们可以将这些icon放到一张图片,通过截取这张图片的不同的区域,拿到不同的icon制作一个背景透明的Icon截图你喜欢的logo,最好是正方形。打开ps,使用快速选择工具选择白色区域ctrl+x删除…

    2022年6月3日
    126
  • 如何取消noarch.rpm包

    如何取消noarch.rpm包有一次部署zabbix服务器,不小心rpm-ivhzabbix的el7版本的rpm了,但是我的系统是centos6.5的,所以就尴尬了rpm-ivhhttp://repo.zabbix.co

    2022年8月1日
    3
  • 动态规划0—1背包问题

    动态规划0—1背包问题动态规划0-1背包问题Ø  问题描述:  给定n种物品和一背包。物品i的重量是wi,其价值为vi,背包的容量为C。问应如何选择装入背包的物品,使得装入背包中物品的总价值最大?Ø 对于一种物品,要么装入背包,要么不装。所以对于一种物品的装入状态可以取0和1.我们设物品i的装入状态为xi,xi∈(0,1),此问题称为0-11背包问题。

    2022年7月26日
    3

发表回复

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

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