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
Detailed tutorial on installing mysql under Linux
1. Shut down the mysql service # service mysqld s...
Some tips on speeding up the development of WeChat mini-programs
1. Create a page using app.json According to our ...
Description of the execution mechanisms of static pages and dynamic pages
1. A static page means that there are only HTML ta...
How to use skeleton screen in vue project
Nowadays, application development is basically se...
The latest super detailed graphic tutorial of installing Kali Linux on virtual machine VMware
Table of contents 1. Download the system image fi...
The content of the commonly used input text box is automatically vertically centered and the default prompt text is empty when clicked
Three functions: 1. Automatic vertical centering o...
Ten popular rules for interface design
<br />This is an article I collected a long ...
About the problem of vertical centering of img and span in div
As shown below: XML/HTML CodeCopy content to clip...
9 ways to show and hide CSS elements
In web page production, displaying and hiding ele...
Detailed explanation of 5 solutions for CSS intermediate adaptive layout
Preface When making a page, we often encounter co...
How to operate MySQL database with ORM model framework
What is ORM? ORM stands for Object Relational Map...
Basic concepts and common methods of Map mapping in ECMAScript6
Table of contents What is a Mapping Difference be...
Solution to the problem of invalid width setting for label and span
By default, setting width for label and span is in...
How to quickly install RabbitMQ in Docker
1. Get the image #Specify the version that includ...
Detailed explanation of the getBoundingClientRect() method in js
1. getBoundingClientRect() Analysis The getBoundi...