原生JS實(shí)現(xiàn)酷炫分頁效果
更新時間:2021年08月20日 14:30:56 作者:aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)酷炫分頁效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享一個如下效果的JS分頁特效,是不是很酷炫。
以下是代碼實(shí)現(xiàn):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS實(shí)現(xiàn)酷炫分頁</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } #ul1 { width: 600px; height: 250px; } #ul1 li { width: 100px; height: 100px; background: red; float: left; overflow: hidden; margin: 10px; } a { margin: 5px; } </style> <!-- 引入運(yùn)動函數(shù) --> <script type="text/javascript" src="js/move.js"></script> <script> window.onload = function () { var json = { title: [ '效果1', '效果2', '效果3', '效果4', '效果5', '效果6', '效果7', '效果8', '效果9', '效果10', '效果11', '效果12', '效果13', '效果14', '效果15', '效果16', '效果17', '效果18', '效果19', '效果20', '效果21', '效果22', '效果23', '效果24', '效果25', '效果26', '效果27', '效果28', '效果29', '效果30', '效果31', '效果32', '效果33', '效果34' ] }; //建立數(shù)組,存儲布局坐標(biāo) var arr = []; //從最后一個li開始運(yùn)動,下標(biāo)為9 var iNow = 9; page({ id: 'div1', nowNum: 1, //計(jì)算總頁數(shù),除以10并向上取整 allNum: Math.ceil(json.title.length / 10), callBack: function (now, all) { //如果當(dāng)前頁乘以10小于json.title.length,加載10條 //如果當(dāng)前頁乘以10大于json.title.length, 加載本例中剩于的4條 var num = now * 10 < json.title.length ? 10 : json.title.length - (now - 1) * 10; //獲取ul var oUl = document.getElementById('ul1'); //獲取li var aLi = oUl.getElementsByTagName('li'); //如果不前ul里面的的內(nèi)容為空 if (oUl.innerHTML == '') { //循環(huán)num次 for (var i = 0; i < num; i++) { //創(chuàng)建li var oLi = document.createElement('li'); //設(shè)置li的內(nèi)容,如果now為0,那么[(now-1)*10 + i]從第1個分配內(nèi)容 //設(shè)置li的內(nèi)容,如果now為1,那么[(now-1)*10 + i]從第11個分配內(nèi)容 oLi.innerHTML = json.title[(now - 1) * 10 + i]; //將li添加到ul中 oUl.appendChild(oLi); } //循環(huán)遍歷 for (var i = 0; i < aLi.length; i++) { //向arr中壓入每個li的left和top值 arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]); } //循環(huán)遍歷 for (var i = 0; i < aLi.length; i++) { //修改每個li的定位為絕對定位 aLi[i].style.position = 'absolute'; //重新分配left的值 aLi[i].style.left = arr[i][0] + 'px'; //重新分配top的值 aLi[i].style.top = arr[i][1] + 'px'; //把影響定位的margin值歸0 aLi[i].style.margin = 0; } } else { //設(shè)置定時器,依次執(zhí)行每個效果的動畫 var timer = setInterval(function () { //執(zhí)行move.js中的strartMove函數(shù),從下標(biāo)為iNow的li開始,修改left/top/opacity值 startMove(aLi[iNow], { left: 200, top: 250, opacity: 0 }); //當(dāng)運(yùn)動的li為最后一個時 if (iNow == 0) { //清除定時器 clearInterval(timer); //iNow下標(biāo)值為當(dāng)前加載數(shù)量減1,本例中加載10條為9,加載4條為3 iNow = num - 1; //點(diǎn)擊標(biāo)簽頁時,更換顯示內(nèi)容 for (var i = 0; i < num; i++) { aLi[i].innerHTML = json.title[(now - 1) * 10 + i]; } //設(shè)置彈出的定時器 var timer2 = setInterval(function () { //執(zhí)行move.js中的strartMove函數(shù),從下標(biāo)為iNow的li開始 //將每個li的屬性值還原到第一次運(yùn)動前存儲的值 startMove(aLi[iNow], { left: arr[iNow][0], top: arr[iNow][1], opacity: 100 }); //當(dāng)運(yùn)動的li為最后一個時 if (iNow == 0) { //清除定時器 clearInterval(timer2); //iNow下標(biāo)值為當(dāng)前加載數(shù)量減1,本例中加載10條為9,加載4條為3 iNow = num - 1; } else { //iNow遞減,依次執(zhí)行 iNow--; } }, 100); } else { //iNow遞減,依次執(zhí)行 iNow--; } }, 100); } } }); }; function page(opt) { if (!opt.id) { return false }; var obj = document.getElementById(opt.id); var nowNum = opt.nowNum || 1; var allNum = opt.allNum || 5; var callBack = opt.callBack || function () { }; if (nowNum >= 4 && allNum >= 6) { var oA = document.createElement('a'); oA.href = '#1'; oA.innerHTML = '首頁'; obj.appendChild(oA); } if (nowNum >= 2) { var oA = document.createElement('a'); oA.href = '#' + (nowNum - 1); oA.innerHTML = '上一頁'; obj.appendChild(oA); } if (allNum <= 5) { for (var i = 1; i <= allNum; i++) { var oA = document.createElement('a'); oA.href = '#' + i; if (nowNum == i) { oA.innerHTML = i; } else { oA.innerHTML = '[' + i + ']'; } obj.appendChild(oA); } } else { for (var i = 1; i <= 5; i++) { var oA = document.createElement('a'); if (nowNum == 1 || nowNum == 2) { oA.href = '#' + i; if (nowNum == i) { oA.innerHTML = i; } else { oA.innerHTML = '[' + i + ']'; } } else if ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) { oA.href = '#' + (allNum - 5 + i); if ((allNum - nowNum) == 0 && i == 5) { oA.innerHTML = (allNum - 5 + i); } else if ((allNum - nowNum) == 1 && i == 4) { oA.innerHTML = (allNum - 5 + i); } else { oA.innerHTML = '[' + (allNum - 5 + i) + ']'; } } else { oA.href = '#' + (nowNum - 3 + i); if (i == 3) { oA.innerHTML = (nowNum - 3 + i); } else { oA.innerHTML = '[' + (nowNum - 3 + i) + ']'; } } obj.appendChild(oA); } } if ((allNum - nowNum) >= 1) { var oA = document.createElement('a'); oA.href = '#' + (nowNum + 1); oA.innerHTML = '下一頁'; obj.appendChild(oA); } if ((allNum - nowNum) >= 3 && allNum >= 6) { var oA = document.createElement('a'); oA.href = '#' + allNum; oA.innerHTML = '尾頁'; obj.appendChild(oA); } callBack(nowNum, allNum); var aA = obj.getElementsByTagName('a'); for (var i = 0; i < aA.length; i++) { aA[i].onclick = function () { var nowNum = parseInt(this.getAttribute('href').substring(1)); obj.innerHTML = ''; page({ id: opt.id, nowNum: nowNum, allNum: allNum, callBack: callBack }); return false; }; } } </script> </head> <body> <ul id="ul1"></ul> <div id="div1"></div> </body> </html>
引入的運(yùn)動函數(shù)代碼:
function startMove(obj, json, endFn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bBtn = true; for (var attr in json) { var iCur = 0; if (attr == 'opacity') { if (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) { iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100; } } else { iCur = parseInt(getStyle(obj, attr)) || 0; } var iSpeed = (json[attr] - iCur) / 3; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != json[attr]) { bBtn = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')'; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } if (bBtn) { clearInterval(obj.timer); if (endFn) { endFn.call(obj); } } }, 30); } function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)
這篇文章主要介紹了重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Java 正則表達(dá)式學(xué)習(xí)總結(jié)和一些小例子
字符串處理是許多程序中非常重要的一部分,它們可以用于文本顯示,數(shù)據(jù)表示,查找鍵和很多目的.在Unix下,用戶可以使用正則表達(dá)式的強(qiáng)健功能實(shí)現(xiàn)這些 目的2012-09-09javascript實(shí)現(xiàn)避免頁面按鈕重復(fù)提交
很多時候我們都需要防止重復(fù)提交,這方面的文章也比較多,實(shí)現(xiàn)的途徑差別也很大.因?yàn)橛行r候即使服務(wù)器能夠識別重復(fù)的提交,也會造成問題.比如需要很長等待時間的操作,在首次提交后,不斷重復(fù)提交,頁面可能會死掉.用腳本來控制的話可以防止這種問題.2015-01-01JavaScript不使用prototype和new實(shí)現(xiàn)繼承機(jī)制
這篇文章主要介紹了JavaScript不使用prototype和new實(shí)現(xiàn)繼承機(jī)制的相關(guān)資料,需要的朋友可以參考下2014-12-12利用JavaScript實(shí)現(xiàn)棧的數(shù)據(jù)結(jié)構(gòu)示例代碼
棧(stack)又名堆棧,它是一種運(yùn)算受限的線性表,下面這篇文章主要給大家介紹了關(guān)于利用JavaScript實(shí)現(xiàn)棧的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08