-
Notifications
You must be signed in to change notification settings - Fork 1
/
横向选项卡特效.html
72 lines (72 loc) · 2.71 KB
/
横向选项卡特效.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>横向选项卡特效.html</title>
<meta name="keywords" content="横向,选项卡,特效">
<meta name="description" content="横向选项卡特效.html">
<style type="text/css">
*{margin:0;padding:0;}
body{background:url("img/bg.png");font:14px/180% "微软雅黑";color:#666;}
.nav{width:720px;height:400px;margin:10% auto;}
.nav .title{height:30px;border-bottom:1px solid #dadada;position:relative;box-shadow:1px -1px 10px #012345;}
.nav .title ul li{width:80px;height:30px;line-height:30px;float:left;list-style:none;text-align:center;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#def),color-stop(1,#abc));}
.nav .title ul li a{text-decoration:none;font-size:14px;color:#333;}
.nav .title ul li a:hover{color:#039ae3;}
.nav .title .underline{width:80px;border-bottom:2px solid #039ae3;position:absolute;left:0;bottom:-1px;}
.nav .content{box-shadow:1px 1px 10px #012345;}
.nav .content .list{height:300px;display:none;}
.nav .content .one{background:#bcdef0;display:block;}
.nav .content .two{background:#cdef01;}
.nav .content .three{background:#def012;}
.nav .content .four{background:#ef0123;}
.nav .content .five{background:#f01234;}
.nav .content .six{background:#012345;}
.nav .content .seven{background:#123456;}
.nav .content .eight{background:#234567;}
.nav .content .nine{background:#345678;}
</style>
</head>
<body>
<div class="nav">
<div class="title">
<p class="underline"></p>
<ul>
<li><a href="#">Books</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Data</a></li>
<li><a href="#">Profiles</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Games</a></li>
</ul>
</div>
<div class="content">
<div class="list one"></div>
<div class="list two"></div>
<div class="list three"></div>
<div class="list four"></div>
<div class="list five"></div>
<div class="list six"></div>
<div class="list seven"></div>
<div class="list eight"></div>
<div class="list nine"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".nav").find("li").hover(function(){
var n_left = ($(window).width() - 720) / 2;
var _left = $(this).offset().left - n_left;
$(".nav").find(".underline").stop();
$(".nav").find(".underline").animate({left:_left},100);
var _index = $(this).index();
$(".list").eq(_index).show().siblings().hide();
});
});
</script>
</body>
</html>