Native JS to achieve cool paging effect
|
This article uses an example to share with you a JS paging effect with the following effect. Isn’t it cool?
Here is the code implementation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Native JS to achieve cool paging</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>
<!-- Introduce motion function -->
<script type="text/javascript" src="js/move.js"></script>
<script>
window.onload = function () {
var json = {
title:
'Effect 1',
'Effect 2',
'Effect 3',
'Effect 4',
'Effect 5',
'Effect 6',
'Effect 7',
'Effect 8',
'Effect 9',
'Effect 10',
'Effect 11',
'Effect 12',
'Effect 13',
'Effect 14',
'Effect 15',
'Effect 16',
'Effect 17',
'Effect 18',
'Effect 19',
'Effect 20',
'Effect 21',
'Effect 22',
'Effect 23',
'Effect 24',
'Effect 25',
'Effect 26',
'Effect 27',
'Effect 28',
'Effect 29',
'Effect 30',
'Effect 31',
'Effect 32',
'Effect 33',
'Effect 34'
]
};
//Create an array to store layout coordinates var arr = [];
//Start the movement from the last li, subscript is 9
var iNow = 9;
page({
id: 'div1',
nowNum: 1,
//Calculate the total number of pages, divide by 10 and round up allNum: Math.ceil(json.title.length / 10),
callBack: function (now, all) {
//If the current page multiplied by 10 is less than json.title.length, load 10 items. //If the current page multiplied by 10 is greater than json.title.length, load the remaining 4 items in this example. var num = now * 10 < json.title.length ? 10 : json.title.length - (now - 1) * 10;
//Get ul
var oUl = document.getElementById('ul1');
//Get li
var aLi = oUl.getElementsByTagName('li');
//If the content in the previous ul is empty if (oUl.innerHTML == '') {
//Loop num times for (var i = 0; i < num; i++) {
//Create li
var oLi = document.createElement('li');
//Set the content of li. If now is 0, then [(now-1)*10 + i] assigns content from the 1st. //Set the content of li. If now is 1, then [(now-1)*10 + i] assigns content from the 11th. oLi.innerHTML = json.title[(now - 1) * 10 + i];
//Add li to ul oUl.appendChild(oLi);
}
//Loop through for (var i = 0; i < aLi.length; i++) {
//Push the left and top values of each li into arr arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
}
//Loop through for (var i = 0; i < aLi.length; i++) {
//Change the positioning of each li to absolute positioning aLi[i].style.position = 'absolute';
//Reassign the value of left aLi[i].style.left = arr[i][0] + 'px';
//Reassign the value of top aLi[i].style.top = arr[i][1] + 'px';
//Reset the margin value that affects positioning to 0
aLi[i].style.margin = 0;
}
} else {
//Set the timer to execute the animation of each effect in turn var timer = setInterval(function () {
//Execute the strartMove function in move.js, starting from the li with the subscript iNow, and modify the left/top/opacity values startMove(aLi[iNow], { left: 200, top: 250, opacity: 0 });
//When the moving li is the last one if (iNow == 0) {
//Clear timer clearInterval(timer);
//iNow subscript value is the current number of loaded items minus 1. In this example, if 10 items are loaded, it is 9, and if 4 items are loaded, it is 3
iNow = num - 1;
//When clicking the tab, change the displayed content for (var i = 0; i < num; i++) {
aLi[i].innerHTML = json.title[(now - 1) * 10 + i];
}
//Set the pop-up timer var timer2 = setInterval(function () {
//Execute the strartMove function in move.js, starting from the li with the index iNow //Restore the attribute value of each li to the value stored before the first movement startMove(aLi[iNow], { left: arr[iNow][0], top: arr[iNow][1], opacity: 100 });
//When the moving li is the last one if (iNow == 0) {
//Clear timer clearInterval(timer2);
//iNow subscript value is the current number of loaded items minus 1. In this example, if 10 items are loaded, it is 9, and if 4 items are loaded, it is 3
iNow = num - 1;
} else {
//iNow decreases, and executes iNow-- in sequence;
}
}, 100);
} else {
//iNow decreases, and executes iNow-- in sequence;
}
}, 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 = 'Homepage';
obj.appendChild(oA);
}
if (nowNum >= 2) {
var oA = document.createElement('a');
oA.href = '#' + (nowNum - 1);
oA.innerHTML = 'Previous page';
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 = 'Next page';
obj.appendChild(oA);
}
if ((allNum - nowNum) >= 3 && allNum >= 6) {
var oA = document.createElement('a');
oA.href = '#' + allNum;
oA.innerHTML = 'Last page';
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>The introduced motion function code:
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];
}
}The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of sql_mode mode example in MySQL
>>: How to configure environment variables in Linux environment
Recommend
Reasons and methods for Waiting for table metadata lock in MySQL
When MySQL performs DDL operations such as alter ...
WHMCS V7.4.2 Graphical Installation Tutorial
1. Introduction WHMCS provides an all-in-one solu...
Detailed explanation of JavaScript prototype chain
Table of contents 1. Constructors and instances 2...
How to configure ssh to log in to Linux using git bash
1. First, generate the public key and private key...
How to collect Nginx logs using Filebeat
Nginx logs can be used to analyze user address lo...
Tutorial on installing MySQL under Linux
Table of contents 1. Delete the old version 2. Ch...
Detailed explanation of common methods of Vue development
Table of contents $nextTick() $forceUpdate() $set...
Examples of using html unordered list tags and ordered list tags
1. Upper and lower list tags: <dl>..</dl...
Tutorial diagram of installing centos7.3 on vmware virtual machine
VMware Preparation CentOS preparation, here is Ce...
How to configure the maximum number of files that can be opened by each Nginx process
1. Check the maximum number of open files in the ...
WeChat applet realizes taking photos and selecting pictures from albums
This article shares the specific code for WeChat ...
JavaScript to implement simple carousel chart most complete code analysis (ES5)
This article shares the specific code for JavaScr...
How to modify the password of MySQL 5.1 and remotely log in to the MySQL database
Create a mysql user and authorize: Format: grant ...
CSS pseudo-element::marker detailed explanation
This article will introduce an interesting pseudo...
Detailed summary of mysql sql statements to create tables
mysql create table sql statement Common SQL state...