Web-Frontend
js-Tutorial
So implementieren Sie mit JS fliegende Seiten-Spezialeffekte, die zum Ersetzen von Seitenzahlen verwendet werden können
So implementieren Sie mit JS fliegende Seiten-Spezialeffekte, die zum Ersetzen von Seitenzahlen verwendet werden können
Dieses Mal zeige ich Ihnen, wie Sie JS verwenden, um den Flying-Page-Spezialeffekt zu implementieren, der zum Ersetzen von Seitenzahlen verwendet werden kann. Welche Vorsichtsmaßnahmen gibt es bei der Verwendung von JS, um den Flying-Page-Spezialeffekt zu implementieren? Kann zum Ersetzen von Seitenzahlen verwendet werden. Das Folgende ist ein praktischer Fall. Lassen Sie uns einen Blick darauf werfen.
Dieser Effekt verwendet eine selbst gekapselte Bewegungsfunktion. Der Clou dieses Effekts besteht darin, dass er ein Array verwendet, um die Positionsinformationen jedes Li zu Beginn und dann beim Klicken auf die Schaltfläche (Seitennummer) zu speichern , die li's Die Änderungen in Breite, Höhe, Position und Transparenz verschwinden nacheinander und werden dann nacheinander auf den Kopf gestellt. Sie können mit der Seitenzahl abgeglichen werden, um den Effekt der Seitenzahlersetzung zu erzielen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JS飞入效果</title>
<link rel="stylesheet" href="stylesheets/base.css" rel="external nofollow" >
<style>
body{
background:#000;
}
.header{
width: 100%;
height: 40px;
background:#fff;
font:bold 30px/40px '微软雅黑';
text-align:center;
}
input{
background:#fff;
margin-top:5px;
width: 50px;
height: 20px;
font:bold 12px/20px '微软雅黑';
}
ul{
width: 360px;
height: 360px;
margin:50px auto;
}
ul li{
width: 100px;
height: 100px;
background:skyblue;
float:left;
margin:5px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementsByTagName('ul')[0];
var aLi=oUl.children;
//用数组来存放没个li的位置
var arr=[];
//存位置
for(var i=0;i<aLi.length;i++) {
arr[i] = {
left:aLi[i].offsetLeft,
top:aLi[i].offsetTop
};
}
//给目前的li定位
for(var i=0;i<arr.length;i++){
aLi[i].style.position='absolute';
aLi[i].style.left=arr[i].left+'px';
aLi[i].style.top=arr[i].top+'px';
aLi[i].style.margin=0;
}
//当点击的时候开定时器，让li一个一个的走
var iNow=0;
var timer=null;
var bReady=false;
oBtn.onclick=function(){
if(bReady){return;}
bReady=true;
timer=setInterval(function(){
move(aLi[iNow],{left:0,top:0,height:0,width:0,opacity:0},{'duration':200,'complete':function(){
if(iNow==arr.length-1){
clearInterval(timer);
back();
bReady=false;
}
iNow++;
}});
},220);
};
function back(){
timer=setInterval(function(){
iNow--;
move(aLi[iNow],{left:arr[iNow].left,top:arr[iNow].top,height:100,width:100,opacity:1},{'duration':200,'complete':function(){
if(iNow==0){
clearInterval(timer);
}
}});
},220);
}
};
</script>
</head>
<body>
<p class="header">飞页效果</p>
<input type="button" value="走你" id="btn1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>Bewegungsfunktion move.js:
/**
* Created by Jason on 2016/11/7.
*/
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
var options=options || {};
var duration=options.duration || 1000;
var easing=options.easing || 'linear';
var start={};
var dis={};
for(name in json){
start[name]=parseFloat(getStyle(obj,name));
dis[name]=json[name]-start[name];
}
//start {width:50,} dis {width:150}
//console.log(start,dis);
var count=Math.floor(duration/30);
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(name in json){
switch (easing){
case 'linear':
var a=n/count;
var cur=start[name]+dis[name]*a;
break;
case 'ease-in':
var a=n/count;
var cur=start[name]+dis[name]*a*a*a;
break;
case 'ease-out':
var a=1-n/count;
var cur=start[name]+dis[name]*(1-a*a*a);
break;
}
if(name=='opacity'){
obj.style.opacity=cur;
}else{
obj.style[name]=cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}Der Operationseffekt ist wie folgt:
Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
So verwenden Sie Vue, um die AdminLTE-Vorlage zu integrieren
So verwenden Sie vue-cli, um schnell ein Projekt zu erstellen
Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit JS fliegende Seiten-Spezialeffekte, die zum Ersetzen von Seitenzahlen verwendet werden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Warum sind Word-Seitenzahlen auf jeder Seite gleich? Was soll ich tun, wenn die Wortseitenzahlen auf jeder Seite gleich sind?
Mar 13, 2024 pm 09:34 PM
Was ist los, wenn die Wortseitenzahlen auf jeder Seite gleich sind? Wir alle verwenden in unserer täglichen Arbeit Software zur Dokumentenbearbeitung, aber viele Benutzer stellen fest, dass die Seitenzahlen auf jeder von ihnen festgelegten Seite gleich sind. Lassen Sie diese Website den Benutzern im Detail vorstellen Word-Seitenzahlen sind auf jeder Seite gleich? Was soll ich tun, wenn die Word-Seitenzahlen auf jeder Seite gleich sind? 1. Öffnen Sie Word und klicken Sie dann in der oberen Menüleiste auf die Option „Einfügen“. 2. Klicken Sie dann auf die Seitenzahl und legen Sie das Seitenzahlenformat fest. 3. Wählen Sie dann im sich öffnenden Fenster ein „Kodierungsformat“ aus. 4. Aktivieren Sie dann die Option „Startseitennummer“, geben Sie 1 ein und klicken Sie auf „OK“.
Wie stelle ich Word-Seitenzahlen so ein, dass ungerade und gerade Seiten links und rechts unterschiedlich sind?
Mar 13, 2024 pm 06:13 PM
Wenn Sie das Dokument persönlicher gestalten möchten, können Sie die Seitenzahlen in Word für ungerade und gerade Seiten unterschiedlich festlegen. Wie können Sie also die linken und rechten Seitenzahlen für ungerade und gerade Seiten in Word unterschiedlich festlegen? Werfen wir einen Blick auf das ausführliche Tutorial unten. Wenn Sie nicht wissen, wie man es bedient, lesen Sie einfach weiter. Methode zur Worteinstellung: 1. Zuerst klicken wir auf „Einfügen“. 2. Klicken Sie anschließend auf „Fußzeile“. 3. Klicken Sie anschließend auf „Fußzeile bearbeiten“. 4. Klicken Sie dann auf „Ungerade und ungerade Seiten sind unterschiedlich“. 5. Suchen Sie dann die Fußzeile der Seite mit der ungeraden Nummer und klicken Sie auf „Seitenzahl“. 6. Anschließend wählen wir rechts den Seitenstil aus.
Wie beginnen PPT-Seitenzahlen von Seite 4 bis Seite 1? Tutorial zur Anpassung der PPT-Seitenzahlen
Mar 13, 2024 pm 05:52 PM
Wenn das PPT viele Seiten hat, können Sie dem PPT Seitenzahlen hinzufügen, damit es übersichtlicher aussieht. Können PPT-Seitenzahlen also angepasst werden? Kann ich in PPT Seitenzahlen ab einer bestimmten Seite festlegen? Wenn Sie den konkreten Vorgang nicht kennen, können Sie sich die Tutorial-Methode unten ansehen. So legen Sie fest, dass die ppt-Nummerierung ab der vierten Seite beginnen soll: 1. Klicken Sie im Menü „Einfügen“ auf „Foliennummerierung“. Wenn wir die Seite mit den Kopf- und Fußzeileneinstellungen aufrufen, sehen wir, dass die Foliennummer standardmäßig nicht aktiviert ist. 2. Aktivieren Sie „Foliennummer“ und klicken Sie dann auf „Auf alle anwenden“, um das Einfügen der Nummer abzuschließen. 3. Sie können die Einfügung im Bild unten sehen
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
Warum ist die Seitenzahl des Wortes immer dieselbe wie die der vorherigen Seite?
Mar 13, 2024 pm 06:28 PM
Wenn Sie Word bearbeiten, möchten Sie dem Word möglicherweise Seitenzahlen hinzufügen, damit es übersichtlicher aussieht. Nach dem Festlegen der Seitenzahl stellte ich jedoch fest, dass die Seitenzahl jeder Seite des Dokuments gleich ist. Dieses Problem ist nicht ungewöhnlich. Schauen wir uns die detaillierte Lösung mit dem Editor an. Sind alle Word-Seitenzahlen genau gleich? 1. Klicken Sie in der „Start“-Oberfläche von Word auf „Seitenzahl“, klicken Sie in der Dropdown-Menüleiste auf „Seitenanfang“ und wählen Sie die normale Zahl „2“ aus. 2. Klicken Sie dann auf der Seite auf „Seitenzahl“ und dann in der Dropdown-Menüleiste auf „Seitenzahlenformat festlegen“.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems
Dec 17, 2023 pm 12:09 PM
Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
