原生JS實(shí)現(xiàn)酷炫分頁效果
更新時(shí)間：2021年08月20日 14:30:56 作者：aiguangyuan
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)酷炫分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享一個(gè)如下效果的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)動(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開始運(yùn)動(dòng)，下標(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個(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)畫
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)動(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)簽頁時(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開始
//將每個(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 = '首頁';
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)動(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)文章
[紅色]拖動(dòng)層...2006-10-10
javascript中的try catch異常捕獲機(jī)制用法分析
這篇文章主要介紹了javascript中的try catch異常捕獲機(jī)制,簡(jiǎn)單分析了try catch異常捕獲機(jī)制的基本定義與使用方法,需要的朋友可以參考下2016-12-12
本篇文章主要對(duì)JS出現(xiàn)失效的情況進(jìn)行總結(jié)。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了微信小程序搜索功能(附：小程序前端+PHP后端)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法,可實(shí)現(xiàn)javascript針對(duì)頁面復(fù)選框元素的統(tǒng)計(jì)與提示功能,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了使用JS獲取頁面上的所有標(biāo)簽 ,需要的朋友可以參考下2018-10-10
全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
導(dǎo)航條（navbar）在Bootstrap中是一個(gè)獨(dú)立組件，導(dǎo)航條（navbar）和導(dǎo)航（nav）在Bootstrap中是有明顯區(qū)別的，本文全面接觸神奇的Bootstrap導(dǎo)航條，感興趣的小伙伴們可以參考一下2016-08-08
解決AJAX中跨域訪問出現(xiàn)''沒有權(quán)限''的錯(cuò)誤
很多人在使用AJAX調(diào)用別人站點(diǎn)內(nèi)容的時(shí)候,JS會(huì)提示"沒有權(quán)限"錯(cuò)誤，這是XMLHTTP組件的限制-安全起見2008-08-08
js使用removeChild方法動(dòng)態(tài)刪除div元素
本節(jié)為大家介紹了js使用removeChild方法動(dòng)態(tài)刪除div元素,需要的朋友可以參考下2014-08-08
微信小程序picker多列選擇器(mode = multiSelector)
本文主要介紹了微信小程序picker多列選擇器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07