jquery實現通用的內容漸層Tab選項卡效果_jquery
- WBOY原創
- 2016-05-16 15:40:221079瀏覽
本文實例講述了jquery實現通用的內容漸顯Tab選項卡效果。分享給大家供大家參考。具體如下：
這是一款網頁常用的TAB選項卡功能，無滑鼠操作的時候它可以自動輪換，美化一般，看上去有些粗糙，有興趣使用的朋友可以進行細緻修飾，相信會更漂亮的。
運作效果如下圖：
線上示範網址如下：
http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/
具體程式碼如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>通用TAB-有自动轮换功能</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style type="text/css">
<!--
* {
padding:0;
margin:0;
list-style:none;
}
.cur {
color:#000;
background-color:#FFF;
}
.red {
font-size: 20px;
font-weight: bolder;
}
#lxfTab-click {
-moz-border-radius:5px;
background-color:#069;
width:600px;
overflow:hidden;
padding:2px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
}
#lxfTab-click .title {
color:#FFF;
}
#lxfTab-click .title li {
float:left;
padding:1px;
cursor:pointer;
width:40px;
margin:8px 0 8px 8px;
border:1px solid #FFF;
-moz-border-radius:5px;
text-align:center;
}
#lxfTab-click .content {
width:600px;
float:left;
}
#lxfTab-click .content li {
word-wrap:break-word;
background-color:#FFF;
padding:6px;
-moz-border-radius:5px;
width: 572px;
margin-top: 0px;
margin-right: 8px;
margin-bottom: 8px;
margin-left: 8px;
}
-->
</style>
<script>
$(function() {
$("#lxfTab-click .title li:first").addClass("cur");
$("#lxfTab-click .content li:not(:first)").hide();
$("#lxfTab-click .title li").click(function() {
var index = $("#lxfTab-click .title li").index($(this));
$("#lxfTab-click .title li").removeClass("cur");
$(this).addClass("cur");
$("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");
$(".now").text(index + 1);
});
/* 自动轮换*/
var i = -1;
//设置起始位置
var speed = 3000;
//设置轮换速度
var n = $("#lxfTab-click .title li").length - 1;
function autoroll() {
if(i >= n) {
i = -1;
}
i++;
$("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");
$("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");
timer = setTimeout(autoroll, speed);
};
/* 鼠标悬停即停止自动轮换 */
function stoproll() {
$("#lxfTab-click li").hover(function() {
clearTimeout(timer);
i = $(this).prevAll().length;
}, function() {
timer = setTimeout(autoroll, speed);
});
};
autoroll();
//执行自动轮换函数
stoproll();
//启动悬停功能
});
</script>
</head>
<body>
<div id="lxfTab-click">
<ul class="title">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
<div class="LRbutton">
<ul>
<li></li><li></li><li></li>
</ul>
</div>
<ul class="content">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</div>
</body>
</html>
希望本文所述對大家的jquery程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn