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
HTML table markup tutorial (30): cell dark border color attribute BORDERCOLORDARK
In cells, dark border colors can be defined indiv...
The HTML 5 draft did not become a formal standard
<br />Yesterday I saw at W3C that the new HT...
HTML web page hyperlink tag
HTML web page hyperlink tag learning tutorial lin...
Deepin20.1 system installs MySQL8.0.23 (super detailed MySQL8 installation tutorial)
Download MySQL-8.0.23 Click to download: mysql-8....
Detailed explanation of the calculation method of flex-grow and flex-shrink in flex layout
Flex(彈性布局) in CSS can flexibly control the layout...
Several ways to center a box in Web development
1. Record several methods of centering the box: 1...
MySQL full-text search Chinese solution and example code
MySQL full text search Chinese solution Recently,...
Summarize several common ranking problems in MySQL
Preface: In some application scenarios, we often ...
A quick review of CSS3 pseudo-class selectors
Preface If CSS is the basic skill of front-end de...
MySQL efficient query left join and group by (plus index)
mysql efficient query MySQL sacrifices group by t...
MySQL 5.7 and above version download and installation graphic tutorial
1. Download 1. MySQL official website download ad...
Click on the lower right corner of the css pseudo-class to see a check mark to indicate the selected sample code
Effect: css: .s_type { border: none; border-radiu...
ReactJs Basics Tutorial - Essential Edition
Table of contents 1. Introduction to ReactJS 2. U...
MySql quick insert tens of millions of large data examples
In the field of data analysis, database is our go...
Use and analysis of Mysql Explain command
The mysql explain command is used to show how MyS...