JQuery实战总结三 标签页效果图实现

在浏览网站时我们会看到当我们鼠标移到多个选项卡上时,不同的选项卡会出现自己对应的界面的要求,在同一个界面上表达了尽量多的信息、大大额提高了空间的利用率、界面的切换效果也是不错的哦,这次自己可以实现啦。

效果图

JQuery实战总结三 标签页效果图实现

制作标签页(通常说成滑动门)的实现思路是当鼠标在标签上时下面div会显示和标签相对应的内容,随着标签的

改变,下面的div也会对应改变样式

我们要实现上面的效果:

CSS:

ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
} #tabsecond li {
float: left;
background-color: white;
color: blue;
padding: 5px;
margin-right: 2px;
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
/**/
border: 1px solid black;
border-bottom: 0;
/*层级,数越大显示的越靠上*/
z-index: 100;
/*设置relative才能设置z-index*/
position: relative;
}
#contentsecond {
width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
/*通过此设置造成标签和对应标签页连在一起的假象*/
position: relative;
top: -1px;
}
img {
display: none;
}

HTML代码:HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content ="text/html;charset=UTF-8" />
<link href="css/tab.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/tab.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ul id="tabfirst">
<li class="tabin">科技</li>
<li>经济</li>
<li>体育</li>
</ul>
<div class="contentin contentfirst">科技新闻</div>
<div class="contentfirst">经济新闻</div>
<div class="contentfirst">体育新闻</div>
<br />
<ul id="tabsecond">
<li class="tabin">装入完整页面</li>
<li>装入部分页面</li>
<li>从远程获取数据</li>
</ul>
<div id="contentsecond" display="block">
<img alt="装载中" src="images/img-loading.gif" />
<div id="realcontent"></div>
</div>
</form>
</body>
</html>

控制滑的JS:

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件

1      $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法

2      mouseover事件

var timoutid;
$(document).ready(function () {
//dom准备完毕执行
$("#tabfirst li").each(function (index) {
$(this).mouseover(function () {
var liNode = $(this);
timoutid = setTimeout(function () {
//将原来显示的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$("#tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来
//$("div").eq(index).addClass("contentin");
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
liNode.addClass("tabin");
}, 300);
}).mouseout(function () {
//鼠标移除清楚延迟
clearTimeout(timoutid);
});
});
//加载全部内容
$("#realcontent").load("allTab.html");
//注册对应的标签点击事件
$("#tabsecond li").each(function (index) {
$(this).click(function () {
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入全部内容
$("#realcontent").load("allTab.html");
} else if (index == 1) {
//装入虚拟动态部分页面
$("#realcontent").load("allTab.html h2");
} else if (index == 2) {
//注入部分内容
$("#realcontent").load("allTab.html span")
}
});
});
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart", function () {
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前,function中的内容会被执行
$(this).show();
}).bind("ajaxStop", function () {
//整个页面中任意ajax交互结束后,function中的内容会被执行
$(this).slideUp("1000");
});
});

通过网上的好多网站的实例:值得我们深入的研究学习,站在巨人的肩膀上哈!

JQuery实战总结三 标签页效果图实现

上一篇:JPG、PNG和GIF图片的基本原理及优…


下一篇:synchronized(四)