QQ效果导航以及动画
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#qqTab ul {
margin:0px;
padding:0px;
}
#qqTab li {
list-style-type:none;
width:100px;
text-align:center;
}
#qqTab h3 {
background-color:gray;
margin:0px;
padding:0px;
width:100px;
}
.back {
background-color:red;
}
#listTab ul {
margin:0px;
padding:0px;
}
#listTab li {
list-style-type:none;
width:100px;
text-align:center;
}
#d1 {
width:10px;
height:10px;
position:absolute;
background-color:red;
left:10px;
top:50px;
filter:alpha(apacity=0);
}
</style>
<script src="Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function () {
//将所有ul项隐藏 QQ效果
$("#qqTab h3").next("ul").css("display", "none");
$("#qqTab h3").click(function () {
$(this).next("ul").slideToggle(2000);
});
$("#qqTab h3:first").click();
//导航对应下的新闻
$("#listTab ul li").hover(function () {
$(this).addClass("back").siblings().removeClass("back");
var id = $(this).attr("name");
$("#listTab div " + "#" + id).siblings().hide().end().fadeIn();
});
//先执行非动画部分在执行动画部分
$("#btn").click(function () {
$("#d1").animate({ "width": 300, "height": 300, "opacity": 1 }, 30000).css("background-color","blue");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="qqTab">
<h3>我的好友</h3>
<ul>
<li>曌颖</li>
<li>感恩的心</li>
<li>★</li>
</ul>
<h3>陌生人</h3>
<ul>
<li>曌颖陌生</li>
<li>感恩的心陌生</li>
<li>★陌生</li>
</ul>
<h3>黑名单</h3>
<ul>
<li>曌颖黑</li>
<li>感恩的心黑</li>
<li>★黑</li>
</ul>
</div>
<div id="listTab">
<ul>
<li name="tab1" class="back">国内新闻</li>
<li name="tab2">国际新闻</li>
<li name="tab3">社会新闻</li>
<li name="tab4">社会万象</li>
<li name="tab5">冷暖人间</li>
</ul>
<div>
<div id="tab1">国内新闻国内新闻国内新闻国内新闻</div>
<div id="tab2">国际新闻国际新闻国际新闻国际新闻</div>
<div id="tab3">社会新闻社会新闻社会新闻社会新闻</div>
<div id="tab4">社会万象社会万象社会万象社会万象</div>
<div id="tab5">冷暖人间冷暖人间冷暖人间冷暖人间</div>
</div>
</div>
<div id="d1"></div>
<input type="button" value="点击" id="btn"/>
</form>
</body>
</html>
