本文實例講述了jQuery實現的多滑動門，多選項卡效果。分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<!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>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超多滑動門效果</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size:12px;
}
ul, li {
list-style-type:none;
}
#tab {
width:500px;
height:200px;
margin:20px auto;
overflow:hidden;
}
#tab .tab_title {
width:500px;
height:22px;
overflow:hidden;
left:0;
top:0;
clear:both;
overflow:hidden;
position:relative;
}
#tab .tab_title .u {
width:465px;
overflow:hidden;
position:relative;
}
#tab .tab_title ul {
margin:0 5px;
position:absolute;
float:left;
width:2784px;/*這個即是滑動門的總長度！就是所有的li的寬度加上間距！計算本案例中的寬度即為：24*100+14*24+24*2（2為邊框寬度）=2784 */
}
#tab .tab_title div {
float:left;
width:15px;
height:20px;
line-height:20px;
cursor:pointer;
}
#tab .tab_title span.vright {
top:0;
right:5px;
margin-left:2px;
}
#tab .tab_title span.vleft {
top:0;
left:0px;
padding-left:5px;
}
#tab .tab_title li {
float:left;
width:100px;/*這個的寬度即是四個滑動門欄目的寬度*/
height:20px;
line-height:20px;
text-align:center;
background-color:#cccccc;
margin-right:14px;
border:1px #999999 solid;
cursor:pointer;
}
#tab .tab_title li:hover {
background-color:#999999
}
#tab .tab_title li.selected {
background-color:#666666;
}
#tab .tab_content {
width:476px;
height:156px;
overflow:hidden;
padding:10px;
border:1px #CCCCCC solid;
}
#tab .tab_content div {
border:1px #999999 dotted;
}
#tab .tab_content div p {
line-height:1.5;
text-indent:25px;
color:#333333;
}
#tab .tab_content .none {
display:none;
}
#div1 {
border:1px #CCCCCC solid;
position:absolute;
display:none;
background:#EEF7EE;
font-size:12px;
padding:5px;
color:#999999;
}
#div2 {
width:120px;
height:15px;
border:1px #CCCCCC solid;
position:absolute;
display:none;
background:#CCCCCC;
font-size:5px;
padding:2px;
color:#999999;
}
</style>
<script language="javascript">
$(function(){
var index = 0;
$(".tab_title ul li").click(function(){
index = $(".tab_title ul li").index(this);
$(this).addClass("selected").siblings().removeClass("selected");
$(".tab_content div").eq(index).show().siblings().hide();
});
var i = 4; //這個前端展示幾個滑動門欄目
var len = $(".u .scrol li").length;
var page = 1;
var maxpage = Math.ceil(len/i);
var scrollWidth = $(".u").width();
var divbox = "<div id='div1' >呵呵，沒有了</div>";
$("body").append(divbox);
$(".vright").click(function(e){
if(!$(".u .scrol").is(":animated")){
if(page == maxpage ){
$(".u .scrol").stop();
$("#div1").css({
"top": (e.pageY + 20) +"px",
"left": (e.pageX + 20) +"px",
"opacity": "0.9"
}).stop(true,false).fadeIn(800).fadeOut(800);
}else{
$(".u .scrol").animate({left : "-=" + scrollWidth +"px"},2000);
page++;
}
}
});
$(".vleft").click(function(){
if(!$(".u .scrol").is(":animated")){
if(page == 1){
$(".u .scrol").stop();
}else{
$(".u .scrol").animate({left : "+=" + scrollWidth +"px"},2000);
page--;
}
}
});
});
</script>
</head>
<body>
<div id="tab">
<div class="tab_title">
<div class="vleft"><strong><<</strong></div>
<div class="u">
<ul class="scrol">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="vright"><strong>>></strong></div>
</div>
<div class="tab_content">
<div>
<p>1的內容</p>
</div>
<div class="none">
<p>2的內容</p>
</div>
<div class="none">
<p>3的內容</p>
</div>
<div class="none">
<p>4的內容</p>
</div>
<div class="none">
<p>5的內容</p>
</div>
<div class="none">
<p>6的內容</p>
</div>
<div class="none">
<p>7的內容</p>
</div>
<div class="none">
<p>8的內容</p>
</div>
<div class="none">
<p>9的內容</p>
</div>
<div class="none">
<p>10的內容</p>
</div>
<div class="none">
<p>10的內容</p>
</div>
<div class="none">
<p>12的內容</p>
</div>
<div class="none">
<p>13的內容</p>
</div>
<div class="none">
<p>14的內容</p>
</div>
<div class="none">
<p>15的內容</p>
</div>
<div class="none">
<p>16的內容</p>
</div>
<div class="none">
<p>17的內容</p>
</div>
<div class="none">
<p>18的內容</p>
</div>
<div class="none">
<p>19的內容</p>
</div>
<div class="none">
<p>20的內容</p>
</div>
<div class="none">
<p>21的內容</p>
</div>
<div class="none">
<p>22的內容</p>
</div>
<div class="none">
<p>23的內容</p>
</div>
<div class="none">
<p>24的內容</p>
</div>
</div>
</div>
</body>
</html>
希望本文所述對大家jQuery程序設計有所幫助。
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試