Web-Frontend
js-Tutorial
Teilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS
Teilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS
Dieser Artikel stellt hauptsächlich die Methode von JS zur Realisierung von Multi-Objekt-Bewegungen vor. Er analysiert die Prinzipien und zugehörigen Operationstechniken von Javascript zur Realisierung von Multi-Objekt-Bewegungen im Detail in Form von Beispielen. Ich hoffe, es kann allen helfen.
Grundlegende Schritte
1. Erhalten Sie die Elemente, die von mehreren Objekten verschoben werden sollen
2 . Dann durchläuft die for-Schleife die Elemente und fügt Ereignisse hinzu
3 Definieren Sie die startMove-Funktion, die zwei Parameter erfordert, das aktuelle „bewegte“ Element und den Zielwert target
Hinweis: Bei der Bewegung mehrerer Objekte kann nicht alles geteilt werden
<script>
window.onload = function(){
var liTags = document.getElementsByTagName('li'); // 第一步
for(var i=0;i<liTags.length;i++){ // 第二步
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
var timer = null;
function startMove(obj,iTarget) { // 第三步，2个参数
clearInterval(timer);
timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);// 缓冲运动注意取整处理
if(obj.offsetWidth == iTarget){
clearInterval(timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script>Problem:
Wenn die Ein- und Ausfahrgeschwindigkeit relativ hoch ist, scheint es, dass einige Li nicht in ihren ursprünglichen Zustand zurückkehren können und in der Mitte stecken bleiben <; 🎜>Wenn sich die Maus in die erste Position bewegt, rufen Sie startMove auf, um einen Timer zu starten. Wenn die Maus li entfernt, müssen Sie auch einen Timer starten, um li in seine ursprüngliche Position zurückzubringen. Wenn li die Hälfte erreicht, bewegen wir uns in die zweite Position li, und der Timer wird zuerst gelöscht. Zu diesem Zeitpunkt blieb der erste li auf halbem Weg stecken.
Lassen Sie jedes Li seinen eigenen Timer haben, um seine Änderungen zu steuern, und definieren Sie jedes Li während der for-Schleife. Einen Ihrer eigenen Timer
liTags[i].timer = null;// 给每个li都添加一个timer
Der vorherige Timer hier wurde in
geändert (der eigene Timer des aktuellen Objekts); hier gibt es kein Problem.obj.timer Der vollständige Code lautet wie folgt:
<body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body>
<style>
ul{list-style: none;}
ul li{
margin: 10px;
width: 200px;height: 50px;
background: lightblue;
}
</style><script>
window.onload = function(){
var liTags = document.getElementsByTagName('li');
for(var i=0;i<liTags.length;i++){
liTags[i].timer = null;// 给每个li都添加一个timer
liTags[i].onmouseover = function () {
startMove(this,400);
}
liTags[i].onmouseout = function () {
startMove(this,200);
}
}
}
function startMove(obj,iTarget) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var iSpeed = (iTarget - obj.offsetWidth)/10;
iSpeed = iSpeed>0 ?Math.ceil(iSpeed):Math.floor(iSpeed);
if(obj.offsetWidth == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+iSpeed+'px';
}
},30);
}
</script><script>
window.onload = function () {
var aImgs = document.getElementsByTagName('img');
for(var i=0;i<aImgs.length;i++){
aImgs[i].timer = null;
aImgs[i].alpha = 100; // 把公用的alpha改成每个img对象都有的属性
aImgs[i].onmouseover = function () {
startMove(this,30);
}
aImgs[i].onmouseout = function () {
startMove(this,100);
}
}
}
// var alpha = 100; 这里alpha在多物体运动里 不能公用
function startMove(obj,iTarget) {
clearInterval(obj.timer);
var iSpeed = (iTarget - obj.alpha)/10;
iSpeed = iSpeed>0 ? Math.ceil(iSpeed): Math.floor(iSpeed);
obj.timer = setInterval(function(){
if(obj.alpha == iTarget){
clearInterval(obj.timer);
}else{
obj.alpha += iSpeed;
obj.style.opacity =obj.alpha/100;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
}
},30);
}
</script>Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für die Bewegung mehrerer Objekte mithilfe von JS. 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
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
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
Wie teile ich Quark Netdisk mit Baidu Netdisk?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk und Baidu Netdisk sind beide sehr praktische Speichertools. Viele Benutzer fragen sich, ob diese beiden Softwareprogramme kompatibel sind. Wie teile ich Quark Netdisk mit Baidu Netdisk? Auf dieser Website erfahren Sie ausführlich, wie Sie Quark Network Disk-Dateien auf der Baidu Network Disk speichern. So speichern Sie Dateien von Quark Network Disk auf Baidu Network Disk Methode 1. Wenn Sie wissen möchten, wie Sie Dateien von Quark Network Disk auf Baidu Network Disk übertragen, laden Sie zunächst die Dateien herunter, die auf Quark Network Disk gespeichert werden müssen, und öffnen Sie sie dann Wählen Sie im Baidu Network Disk-Client den Ordner aus, in dem die komprimierte Datei gespeichert werden soll, und doppelklicken Sie, um den Ordner zu öffnen. 2. Klicken Sie nach dem Öffnen des Ordners oben links im Fenster auf „Hochladen“. 3. Suchen Sie die komprimierte Datei, die auf Ihren Computer hochgeladen werden soll, und klicken Sie, um sie auszuwählen.
So teilen Sie NetEase Cloud Music mit WeChat Moments_Tutorial zum Teilen von NetEase Cloud Music mit WeChat Moments
Mar 25, 2024 am 11:41 AM
1. Zuerst rufen wir NetEase Cloud Music auf und klicken dann auf die Software-Homepage-Oberfläche, um die Song-Wiedergabeoberfläche aufzurufen. 2. Suchen Sie dann in der Song-Wiedergabeoberfläche die Schaltfläche für die Freigabefunktion oben rechts, wie im roten Feld in der Abbildung unten gezeigt, klicken Sie, um den Freigabekanal im Freigabekanal auszuwählen, und klicken Sie auf die Option „Teilen für“. Wählen Sie unten den ersten Eintrag „WeChat Moments“ aus, mit dem Sie Inhalte für WeChat Moments freigeben können.
So teilen Sie Dateien mit Freunden auf Baidu Netdisk
Mar 25, 2024 pm 06:52 PM
Vor kurzem hat der Baidu Netdisk Android-Client eine neue Version 8.0.0 eingeführt. Diese Version bringt nicht nur viele Änderungen, sondern fügt auch viele praktische Funktionen hinzu. Am auffälligsten ist unter anderem die Verbesserung der Ordnerfreigabefunktion. Jetzt können Benutzer ganz einfach Freunde einladen, beizutreten und wichtige Dateien im Beruf und im Privatleben zu teilen, was eine bequemere Zusammenarbeit und gemeinsame Nutzung ermöglicht. Wie teilen Sie die Dateien, die Sie benötigen, mit Ihren Freunden? Ich hoffe, dass Ihnen der Herausgeber dieser Website weiterhelfen kann. 1) Öffnen Sie die Baidu Cloud APP, wählen Sie zuerst den entsprechenden Ordner auf der Startseite aus und klicken Sie dann auf das Symbol [...] in der oberen rechten Ecke der Benutzeroberfläche (wie unten gezeigt). 2) Klicken Sie dann auf [+]. Klicken Sie auf die Spalte „Gemeinsame Mitglieder“ 】 und markieren Sie abschließend alle
Teilen des Mango TV-Mitgliedskontos 2023
Feb 07, 2024 pm 02:27 PM
Mango TV bietet verschiedene Arten von Filmen, Fernsehserien, Varietés und anderen Ressourcen, und Benutzer können frei wählen, ob sie diese ansehen möchten. Mango TV-Mitglieder können nicht nur alle VIP-Dramen ansehen, sondern auch die höchste Bildqualität einstellen, damit Benutzer die Dramen gerne ansehen können. Nachfolgend stellt Ihnen der Herausgeber einige kostenlose Mango TV-Mitgliedskonten vor, die Sie nutzen können. Beeilen Sie sich und werfen Sie einen Blick darauf Schau mal. Kostenloses Teilen des neuesten Mitgliedskontos von Mango TV 2023: Hinweis: Dies sind die neuesten gesammelten Mitgliedskonten. Sie können sich anmelden und diese direkt verwenden. Ändern Sie das Passwort nicht nach Belieben. Kontonummer: 13842025699 Passwort: qds373 Kontonummer: 15804882888 Passwort: evr6982 Kontonummer: 13330925667 Passwort: jgqae Kontonummer: 1703
Lösen Sie das Problem, dass die Discuz WeChat-Freigabe nicht angezeigt werden kann
Mar 09, 2024 pm 03:39 PM
Titel: Um das Problem zu lösen, dass Discuz WeChat-Freigaben nicht angezeigt werden können, sind spezifische Codebeispiele erforderlich. Mit der Entwicklung des mobilen Internets ist WeChat zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Bei der Website-Entwicklung werden viele Websites WeChat-Freigabefunktionen integrieren, um das Benutzererlebnis zu verbessern und die Website-Präsenz zu erweitern, sodass Benutzer Website-Inhalte problemlos mit Moments oder WeChat-Gruppen teilen können. Allerdings kann es bei der Verwendung von Open-Source-Forumsystemen wie Discuz manchmal zu dem Problem kommen, dass WeChat-Freigaben nicht angezeigt werden können, was zu gewissen Schwierigkeiten bei der Benutzererfahrung führt.
Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode
Jan 05, 2024 pm 06:08 PM
JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest
Teilen Sie zwei Installationsmethoden für HP-Druckertreiber
Mar 13, 2024 pm 05:16 PM
HP-Drucker sind in vielen Büros unverzichtbare Druckgeräte. Durch die Installation des Druckertreibers auf dem Computer können Probleme, wie zum Beispiel, dass der Drucker keine Verbindung herstellen kann, perfekt gelöst werden. Wie installiert man den HP-Druckertreiber? Der folgende Editor stellt Ihnen zwei Methoden zur Installation von HP-Druckertreibern vor. Die erste Methode: Laden Sie den Treiber von der offiziellen Website herunter. 1. Durchsuchen Sie die offizielle Website von HP China in der Suchmaschine und wählen Sie in der Support-Spalte [Software und Treiber] aus. 2. Wählen Sie die Kategorie [Drucker] aus, geben Sie Ihr Druckermodell in das Suchfeld ein und klicken Sie auf [Senden], um Ihren Druckertreiber zu finden. 3. Wählen Sie den entsprechenden Drucker entsprechend Ihrem Computersystem aus. Wählen Sie für Win10 den Treiber für das Win10-System. 4. Nach erfolgreichem Download finden Sie es im Ordner
So teilen Sie ppt
Mar 20, 2024 pm 07:51 PM
Menschen am Arbeitsplatz werden mit der PPT-Erstellung vertraut sein, denn egal, ob es sich um eine Jahresendzusammenfassung oder einen Arbeitsbericht handelt, viele Unternehmen verlangen die Präsentation in Form einer PPT. Zu diesem Zeitpunkt bin ich auf ein Problem gestoßen: Wie kann ich PPT teilen? Keine Sorge, der Editor unten zeigt Ihnen, wie Sie PPT teilen. 1. Wählen Sie zunächst die bearbeitete PPT aus und klicken Sie oben links auf Speichern (wenn Sie WPS verwenden, können Sie zuerst auf Anmelden klicken). 2. Klicken Sie dann wie unten gezeigt auf das Teilen-Symbol in der Menüleiste. 3. Dann wird die unten gezeigte Freigabeoberfläche angezeigt. Sie können sehen, dass ein Freigabelink angezeigt wird. Klicken Sie hier, um den Link zum Teilen zu senden. 4. Sie können auch in der unteren linken Ecke des Bildes unten auf „Freunden das Bearbeiten erlauben“ klicken, damit auch Freunde auf dieses PPT klicken können, um es zu bearbeiten. 5. Geben Sie ggf. P ein
