Natives JS zum Erzielen eines coolen Paging-Effekts
|
In diesem Artikel wird anhand eines Beispiels ein JS-Paging-Effekt mit folgender Wirkung vorgestellt. Ist das nicht cool?
Hier ist die Codeimplementierung:
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS für cooles Paging</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
li {
Listenstil: keiner;
}
#ul1 {
Breite: 600px;
Höhe: 250px;
}
#ul1 li {
Breite: 100px;
Höhe: 100px;
Hintergrund: rot;
schweben: links;
Überlauf: versteckt;
Rand: 10px;
}
A {
Rand: 5px;
}
</Stil>
<!-- Bewegungsfunktion einführen -->
<script type="text/javascript" src="js/move.js"></script>
<Skript>
fenster.onload = Funktion () {
var json = {
Titel:
'Effekt 1',
'Effekt 2',
'Effekt 3',
'Effekt 4',
'Effekt 5',
'Effekt 6',
'Effekt 7',
'Effekt 8',
'Effekt 9',
'Effekt 10',
'Effekt 11',
'Effekt 12',
'Effekt 13',
'Effekt 14',
'Effekt 15',
'Effekt 16',
'Effekt 17',
'Effekt 18',
'Effekt 19',
'Effekt 20',
'Effekt 21',
'Effekt 22',
'Effekt 23',
'Effekt 24',
'Effekt 25',
'Effekt 26',
'Effekt 27',
'Effekt 28',
'Effekt 29',
'Effekt 30',
'Effekt 31',
'Effekt 32',
'Effekt 33',
„Effekt 34“
]
};
//Erstellen Sie ein Array zum Speichern der Layoutkoordinaten var arr = [];
//Starten Sie die Bewegung vom letzten li, Index ist 9
var iNow = 9;
Seite({
ID: "div1",
jetztNummer: 1,
//Gesamtseitenzahl berechnen, durch 10 dividieren und aufrunden allNum: Math.ceil(json.title.length / 10),
callBack: Funktion (jetzt, alle) {
//Wenn die aktuelle Seite multipliziert mit 10 kleiner ist als json.title.length, lade 10 Elemente. //Wenn die aktuelle Seite multipliziert mit 10 größer ist als json.title.length, lade in diesem Beispiel die verbleibenden 4 Elemente. var num = now * 10 < json.title.length ? 10 : json.title.length - (now - 1) * 10;
//ul abrufen
var oUl = document.getElementById('ul1');
//Holen Sie sich li
var aLi = oUl.getElementsByTagName('li');
//Wenn der Inhalt in der vorherigen UL leer ist, if (oUl.innerHTML == '') {
//Schleife num-mal for (var i = 0; i < num; i++) {
//Erstelle li
var oLi = document.createElement('li');
//Setze den Inhalt von li. Wenn jetzt 0 ist, dann weist [(jetzt-1)*10 + i] den Inhalt vom 1. zu. //Setze den Inhalt von li. Wenn jetzt 1 ist, dann weist [(jetzt-1)*10 + i] den Inhalt vom 11. zu. oLi.innerHTML = json.title[(jetzt - 1) * 10 + i];
//li zu ul hinzufügen oUl.appendChild(oLi);
}
//Schleife durch for (var i = 0; i < aLi.length; i++) {
// Schiebe die linken und oberen Werte jedes li in arr arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
}
//Schleife durch for (var i = 0; i < aLi.length; i++) {
//Ändere die Positionierung jedes Li in eine absolute Positionierung aLi[i].style.position = 'absolute';
//Den Wert von left neu zuweisen aLi[i].style.left = arr[i][0] + 'px';
//Den Wert von oben neu zuweisen aLi[i].style.top = arr[i][1] + 'px';
//Setze den Randwert, der die Positionierung beeinflusst, auf 0 zurück.
aLi[i].style.margin = 0;
}
} anders {
//Stellen Sie den Timer so ein, dass die Animation jedes Effekts nacheinander ausgeführt wird. var timer = setInterval(function () {
//Führen Sie die Funktion „strartMove“ in move.js aus, beginnend bei li mit dem Index „iNow“, und ändern Sie die Werte für links/oben/Deckkraft startMove(aLi[iNow], { left: 200, top: 250, opacity: 0 });
//Wenn das bewegte li das letzte ist if (iNow == 0) {
//Timer löschen clearInterval(timer);
//Der Indexwert von iNow ist die aktuelle Anzahl der geladenen Elemente minus 1. In diesem Beispiel sind es 9, wenn 10 Elemente geladen sind, und 3, wenn 4 Elemente geladen sind.
iNow = Num - 1;
//Beim Klicken auf die Registerkarte den angezeigten Inhalt ändern für (var i = 0; i < num; i++) {
aLi[i].innerHTML = json.title[(jetzt - 1) * 10 + i];
}
//Popup-Timer einstellen var timer2 = setInterval(function () {
//Führe die Funktion startMove in move.js aus, beginnend mit dem li mit dem Index iNow //Stelle den Attributwert jedes li auf den Wert zurück, der vor der ersten Bewegung gespeichert wurde startMove(aLi[iNow], { left: arr[iNow][0], top: arr[iNow][1], opacity: 100 });
//Wenn das bewegte li das letzte ist if (iNow == 0) {
//Timer löschen clearInterval(timer2);
//Der Indexwert von iNow ist die aktuelle Anzahl der geladenen Elemente minus 1. In diesem Beispiel sind es 9, wenn 10 Elemente geladen sind, und 3, wenn 4 Elemente geladen sind.
iNow = Num - 1;
} anders {
//iNow nimmt ab und führt iNow-- der Reihe nach aus;
}
}, 100);
} anders {
//iNow nimmt ab und führt iNow-- der Reihe nach aus;
}
}, 100);
}
}
});
};
Funktion Seite (opt) {
wenn (!opt.id) { return false };
var obj = document.getElementById(opt.id);
var jetztNum = opt.jetztNum || 1;
var allNum = opt.allNum || 5;
var callBack = opt.callBack || Funktion () { };
wenn (jetztZahl >= 4 und alleZahl >= 6) {
var oA = document.createElement('a');
oA.href = "#1";
oA.innerHTML = 'Startseite';
obj.appendChild(oA);
}
wenn (jetztZahl >= 2) {
var oA = document.createElement('a');
oA.href = '#' + (jetztNum - 1);
oA.innerHTML = 'Vorherige Seite';
obj.appendChild(oA);
}
wenn (alleZahl <= 5) {
für (var i = 1; i <= allNum; i++) {
var oA = document.createElement('a');
oA.href = "#" + i;
wenn (jetztNum == i) {
oA.innerHTML = i;
} anders {
oA.innerHTML = '[' + i + ']';
}
obj.appendChild(oA);
}
} anders {
für (var i = 1; i <= 5; i++) {
var oA = document.createElement('a');
wenn (jetztZahl == 1 || jetztZahl == 2) {
oA.href = "#" + i;
wenn (jetztNum == i) {
oA.innerHTML = i;
} anders {
oA.innerHTML = '[' + i + ']';
}
} sonst wenn ((allNum - nowNum) == 0 || (allNum - nowNum) == 1) {
oA.href = '#' + (alleNummer - 5 + i);
wenn ((alleZahl - jetztZahl) == 0 und i == 5) {
oA.innerHTML = (allNum - 5 + i);
} sonst wenn ((alleZahl - jetztZahl) == 1 && i == 4) {
oA.innerHTML = (allNum - 5 + i);
} anders {
oA.innerHTML = '[' + (allNum - 5 + i) + ']';
}
} anders {
oA.href = '#' + (jetztNum - 3 + i);
wenn (i == 3) {
oA.innerHTML = (nowNum - 3 + i);
} anders {
oA.innerHTML = '[' + (nowNum - 3 + i) + ']';
}
}
obj.appendChild(oA);
}
}
wenn ((alleZahl - jetztZahl) >= 1) {
var oA = document.createElement('a');
oA.href = '#' + (jetztNum + 1);
oA.innerHTML = 'Nächste Seite';
obj.appendChild(oA);
}
wenn ((alleZahl - jetztZahl) >= 3 und alleZahl >= 6) {
var oA = document.createElement('a');
oA.href = '#' + alleNummern;
oA.innerHTML = 'Letzte Seite';
obj.appendChild(oA);
}
Rückruf(jetztNummer, alleNummer);
var aA = obj.getElementsByTagName('a');
für (var i = 0; i < aA.Länge; i++) {
aA[i].onclick = Funktion () {
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML = '';
Seite({
ID: opt.id,
jetztNum: jetztNum,
allNum: allNum,
Rückruf: Rückruf
});
gibt false zurück;
};
}
}
</Skript>
</Kopf>
<Text>
<ul id="ul1"></ul>
<div id="div1"></div>
</body>
</html>Der eingeführte Bewegungsfunktionscode:
Funktion startMove(obj, json, endFn) {
Intervall löschen(Objekt.Timer);
obj.timer = setzeIntervall(Funktion () {
var bBtn = true;
für (var attr in json) {
var iCur = 0;
wenn (attr == 'Deckkraft') {
wenn (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} anders {
iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
}
} anders {
iCur = parseInt(getStyle(obj, attr)) || 0;
}
var iSpeed = (json[attr] – iCur)/3;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
wenn (iCur != json[attr]) {
bBtn = falsch;
}
wenn (attr == 'Deckkraft') {
obj.style.filter = 'Alpha(Deckkraft=' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} anders {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
wenn (bBtn) {
Intervall löschen(Objekt.Timer);
wenn (EndeFn) {
endFn.call(obj);
}
}
}, 30);
}
Funktion getStyle(Objekt, Attribut) {
wenn (obj.aktuellerStil) {
returniere obj.currentStyle[attr];
}
anders {
gibt getComputedStyle zurück (Objekt, false) [attr];
}
}Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erläuterung des SQL_Mode-Modusbeispiels in MySQL
>>: So konfigurieren Sie Umgebungsvariablen in einer Linux-Umgebung
Artikel empfehlen
Mehrere Möglichkeiten zum Sichern einer MySql-Datenbank
mysqldump-Tool-Sicherung Sichern Sie die gesamte ...
Detaillierte Installation und Verwendung von SSH in der Ubuntu-Umgebung
SSH steht für Secure Shell, ein sicheres Übertrag...
Detailliertes Tutorial zur Installation von Docker auf CentOS 8.4
Inhaltsverzeichnis Vorwort: Systemanforderungen: ...
Layim in Javascript, um Freunde und Gruppen zu finden
Derzeit haben die Verantwortlichen von Layui die ...
Schritte zur Installation von Pyenv unter Deepin
Vorwort In der Vergangenheit habe ich die Python-...
Tiefgreifendes Verständnis der Matching-Logik von Server und Standort in Nginx
Server-Abgleichlogik Wenn Nginx entscheidet, in w...
MySQL-Datenmigration mit dem Befehl MySQLdump
Die Vorteile dieser Lösung liegen in der Einfachh...
Lösen Sie das Problem der regelmäßigen automatischen Dateilöschung durch Crontab + Shell-Skript unter Centos7
Problembeschreibung: In letzter Zeit besteht die ...
Lösen Sie das Problem der Docker-Protokollmontage
Der Schlüssel ist, dass der lokale Server keine S...
Detaillierte Erläuterung der benutzerdefinierten Konfiguration des offiziellen Docker-MySQL-Image
Um Installationszeit zu sparen, habe ich zum Star...
Eine Zusammenfassung detaillierter Einblicke in den Import von CSS
Auf die Entwicklungsgeschichte von CSS wird hier ...
Praktische Möglichkeit zum Erstellen einer verteilten Selenium-Grid-Umgebung mit Docker
Vor Kurzem musste ich die Zoom-Videokonferenz tes...
Der vollständige Leitfaden zum Rasterlayout in CSS
Grid ist ein zweidimensionales Rasterlayoutsystem...
Zusammenfassung der Verwendung von MySQL Online DDL gh-ost
Hintergrund: Als DBA werden die meisten DDL-Änder...
Detaillierte Erläuterung der Verwendung von Object.create-Instanzen in js
1. Erstellen Sie mit der Methode Object.create() ...