前言
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、康樂網(wǎng)站維護(hù)、網(wǎng)站推廣。
本文主要介紹的是利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果，注：實(shí)現(xiàn)原理與輪播圖相似。下面話不多說，來看看詳細(xì)的 實(shí)現(xiàn)方法吧。
html:
日期參與團(tuán)購(gòu)場(chǎng)次團(tuán)購(gòu)結(jié)果當(dāng)前狀態(tài)
02.08 第一場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.09 第二場(chǎng) 失敗 G幣已退回 02.10 第三場(chǎng) 團(tuán)購(gòu)中 團(tuán)購(gòu)中 02.11 第一場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.12 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.13 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.14 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.15 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.16 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.17 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.18 第二場(chǎng) 成功 G幣已退回 02.19 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.20 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.21 第二場(chǎng) 成功 團(tuán)購(gòu)中 02.22 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.23 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放 02.24 第二場(chǎng) 成功 G幣已退回 02.25 第二場(chǎng) 成功 現(xiàn)金券已發(fā)放
css:
重慶分公司
重慶分公司
.day02-popup04 {
width: 708px;
height: 404px; }
.day02-popup04 .group-caption {
width: 594px;
margin: 30px auto 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc; }
.day02-popup04 .group-caption span {
width: 147.5px;
display: inline-block;
border-right: 1px solid #ccc;
text-align: center;
height: 50px;
line-height: 50px;
font-weight: 600;
font-size: 20px; }
.day02-popup04 .group-buying-table {
position: relative;
width: 594px;
margin: 0 auto;
height: 255px;
overflow: hidden;
border-collapse: collapse; }
.day02-popup04 .group-buying-table tbody {
position: absolute;
top: 0; }
.day02-popup04 .group-buying-table tbody tr {
height: 50px;
line-height: 50px; }
.day02-popup04 .group-buying-table tbody tr td {
width: 147px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
font-size: 18px;
color: #666; }
.day02-popup04 .popup-page-btn {
position: absolute;
width: 100%;
bottom: 0;
height: 66px;
line-height: 66px;}
.day02-popup04 .popup-page-btn a {
display: inline-block;
text-align: center;
width: 142px;
margin: 0 12px;
height: 42px;
line-height: 42px;
font-size: 20px;
color: #fff;
background-color: #bf3737; } js代碼：
var i= 5, //每頁(yè)顯示的行數(shù)
len=$groupTable.find('tbody tr').length,//總行數(shù)
page= 1, //起始頁(yè)
maxPage=Math.ceil(len/i), //總頁(yè)數(shù)
$tbody=$groupTable.find('tbody'), //容器
$scrollHeight=$groupTable.height(); //滾動(dòng)距離
//下翻按鈕
$(".next").click(function(e){
if(!$tbody.is(":animated")){
if(page == maxPage ){
$tbody.stop();
}else{
$tbody.animate({top : "-=" + $scrollHeight +"px"},800);
page++;
}
}
});
//上翻按鈕
$(".prev").click(function(){
if(!$tbody.is(":animated")){
if(page == 1){
$tbody.stop();
}else{
$tbody.animate({top : "+=" + $scrollHeight +"px"},800);
page--;
}
}
}); 總結(jié)
以上就是利用利用jQuery實(shí)現(xiàn)一個(gè)表格的簡(jiǎn)單上下翻頁(yè)的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
