1. 程式人生 > >點擊上下箭頭,頁碼發生改變

點擊上下箭頭,頁碼發生改變

數字 src ear 總頁數 math 技術 func alc triangle

技術分享圖片

還是看圖,channel的length為總頁數,向上取整,點擊上下箭頭,分別向上下滾動,拒絕瘋狂點擊多次加載事件,細節看代碼

    var clickLock = false;
function calculateScrollTop (symbol) {
var limit = 8; //一頁8個channel
var itemHeight = 20; //一個channel高20px
var currentPage = $("#home_page").text() * 1; // home_page為當前頁 註: *1是直接將text值轉化為數字
var allPages = Math.ceil(channelData.length / 8); //向上取整 獲取總頁數
var scrollTop = $(‘#line‘).scrollTop(); //獲取滾動塊的scrollTop值
var flag = symbol ? currentPage < allPages : currentPage > 1; // 根據傳入參數判斷點擊的是上箭頭還是下箭頭 上箭頭為0 下箭頭為1
if (flag) {
var changeTop = 0;
var size = (currentPage + (symbol ? 1 : -1)) * limit;
if (size > channelData.length) {
changeTop = (channelData.length - currentPage * limit) * itemHeight;
} else {
changeTop = limit * itemHeight;
}
if (changeTop != 0) {
clickLock = true;
$(‘#line‘).animate({"scrollTop": symbol ? scrollTop + changeTop: scrollTop - changeTop}, 200, ‘linear‘, function () {clickLock = false});
$("#home_page").html($("#home_page").text() * 1 + (symbol ? 1: -1));
}
}
}
$("#triangle-down").click(function(){//點擊三角箭頭向下滾動一頁(8個通道)
if (clickLock) return;
calculateScrollTop(true);
});
$("#triangle-up").click(function(){//點擊三角箭頭向上滾動一頁(8個通道)
if (clickLock) return;
calculateScrollTop(false);
});

點擊上下箭頭,頁碼發生改變