原生JS實(shí)現(xiàn)酷炫分頁(yè)效果
本文實(shí)例為大家分享一個(gè)如下效果的JS分頁(yè)特效,是不是很酷炫。
以下是代碼實(shí)現(xiàn):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS實(shí)現(xiàn)酷炫分頁(yè)</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)動(dòng)函數(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ù)組,存儲(chǔ)布局坐標(biāo) var arr = []; //從最后一個(gè)li開(kāi)始運(yùn)動(dòng),下標(biāo)為9 var iNow = 9; page({ id: 'div1', nowNum: 1, //計(jì)算總頁(yè)數(shù),除以10并向上取整 allNum: Math.ceil(json.title.length / 10), callBack: function (now, all) { //如果當(dāng)前頁(yè)乘以10小于json.title.length,加載10條 //如果當(dāng)前頁(yè)乘以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個(gè)分配內(nèi)容 //設(shè)置li的內(nèi)容,如果now為1,那么[(now-1)*10 + i]從第11個(gè)分配內(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中壓入每個(gè)li的left和top值 arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]); } //循環(huán)遍歷 for (var i = 0; i < aLi.length; i++) { //修改每個(gè)li的定位為絕對(duì)定位 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è)置定時(shí)器,依次執(zhí)行每個(gè)效果的動(dòng)畫(huà) var timer = setInterval(function () { //執(zhí)行move.js中的strartMove函數(shù),從下標(biāo)為iNow的li開(kāi)始,修改left/top/opacity值 startMove(aLi[iNow], { left: 200, top: 250, opacity: 0 }); //當(dāng)運(yùn)動(dòng)的li為最后一個(gè)時(shí) if (iNow == 0) { //清除定時(shí)器 clearInterval(timer); //iNow下標(biāo)值為當(dāng)前加載數(shù)量減1,本例中加載10條為9,加載4條為3 iNow = num - 1; //點(diǎn)擊標(biāo)簽頁(yè)時(shí),更換顯示內(nèi)容 for (var i = 0; i < num; i++) { aLi[i].innerHTML = json.title[(now - 1) * 10 + i]; } //設(shè)置彈出的定時(shí)器 var timer2 = setInterval(function () { //執(zhí)行move.js中的strartMove函數(shù),從下標(biāo)為iNow的li開(kāi)始 //將每個(gè)li的屬性值還原到第一次運(yùn)動(dòng)前存儲(chǔ)的值 startMove(aLi[iNow], { left: arr[iNow][0], top: arr[iNow][1], opacity: 100 }); //當(dāng)運(yùn)動(dòng)的li為最后一個(gè)時(shí) if (iNow == 0) { //清除定時(shí)器 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 = '首頁(yè)'; obj.appendChild(oA); } if (nowNum >= 2) { var oA = document.createElement('a'); oA.href = '#' + (nowNum - 1); oA.innerHTML = '上一頁(yè)'; 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 = '下一頁(yè)'; obj.appendChild(oA); } if ((allNum - nowNum) >= 3 && allNum >= 6) { var oA = document.createElement('a'); oA.href = '#' + allNum; oA.innerHTML = '尾頁(yè)'; 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)動(dòng)函數(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]; } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)
這篇文章主要介紹了重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(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)避免頁(yè)面按鈕重復(fù)提交
很多時(shí)候我們都需要防止重復(fù)提交,這方面的文章也比較多,實(shí)現(xiàn)的途徑差別也很大.因?yàn)橛行r(shí)候即使服務(wù)器能夠識(shí)別重復(fù)的提交,也會(huì)造成問(wèn)題.比如需要很長(zhǎng)等待時(shí)間的操作,在首次提交后,不斷重復(fù)提交,頁(yè)面可能會(huì)死掉.用腳本來(lái)控制的話可以防止這種問(wèn)題.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)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08