suchen

Heim >Web-Frontend >js-Tutorial >Ausführliche Erklärung, wie man natives JS verwendet, um einen mobilen Web-Karusselleffekt zu erzielen

Ausführliche Erklärung, wie man natives JS verwendet, um einen mobilen Web-Karusselleffekt zu erzielen

巴扎黑
巴扎黑Original
2017-09-11 09:26:412575Durchsuche

Bei der mobilen Entwicklung sind Karussellbilder unverzichtbar. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von reinem JS zur Realisierung mobiler Webkarussellbilder ein. Das Wichtigste ist, den Tween-Algorithmus zu kombinieren Beispielcode in diesem Artikel. Freunde in Not können sich darauf beziehen.

Vorwort

Ich glaube, jeder sollte wissen, dass Karussellbilder auf mobilen Endgeräten unsere häufigsten Bedürfnisse sind und dass wir sie am schnellsten umsetzen können Oft wird ein Code von Drittanbietern wie Swiper verwendet, aber wenn ich auf kompliziertere Rotationskarten stoße, weiß ich oft nicht, wie ich sie an verschiedene komplexe und sich ändernde Anforderungen anpassen kann Wenn der Code, den Sie schreiben, Fehler enthält, können Sie diese leicht beheben.

Ohne den Swiper-Quellcode zu lesen, habe ich versucht, selbst ein einfaches, aber praktisches mobiles Karusselldiagramm zu implementieren. Nach mehreren Stunden des Nachdenkens und Übens wurde mir schließlich klar (wie im Bild gezeigt):


Die Umsetzung ist komplizierter Karussellbilder auf Mobilgeräten als auf dem PC, hauptsächlich in folgenden Aspekten:

1. Anforderungen an Karussellbilder Passen Sie sich an Bildschirme mit unterschiedlichen Breiten/Dpr an

2. Es müssen berührungsbezogene Ereignisse verwendet werden

3. Verschiedene Modelle unterstützen möglicherweise Berührungsereignisse unterschiedlich

4. Bewegen Sie Ihren Finger einen Teil des Distanz im Bild, und die verbleibende Distanz muss automatisch zurückgelegt werden

5. Die automatische Fertigstellung der Distanz erfordert eine einfache Zeitkurve

Aber die Ideen zur Lösung von Problemen mit der Programmierung sind ähnlich,


Wir können bei der Verwendung des Karusselldiagramms sorgfältig beobachten und das Wesentliche durch das Phänomen erkennen:


Wenn wir das Karusselldiagramm verwenden, können wir sorgfältig beobachten und die Essenz durch das Phänomen erkennen:

  • Legen Sie Ihren Finger auf das Bild und bewegen Sie Ihren Finger nach links oder nach rechts, und das Bild bewegt sich entsprechend;

  • Wenn sich der Finger eine kleine Strecke bewegt, kehrt das Bild automatisch zu seiner Position zurück; Nächstes Bild;

  • Wenn Sie Ihren Finger schnell nach links oder rechts bewegen, wechselt er zum nächsten Bild;

  • Das Bilderkarussell Ist eine Endlosschleife, müssen wir die Methode 3 1 2 3 1 verwenden, um N + 2 Bilder zu erreichen, um das Endlosschleifenkarussell von N Bildern zu realisieren

Durch die Analyse des Phänomens können wir einen grundlegenden Implementierungsplan vorschlagen:

1. Fingerberührungsereignisse können durch 3 Ereignisse realisiert werden: touchstart touchmove touchend

2. Wenn der Finger berührt, müssen wir die x-Koordinate des Fingers aufzeichnen. Sie können das pageX-Attribut von touch verwenden und zu diesem Zeitpunkt

3. Wenn der Finger touchesmove, wir müssen auch pageX aufzeichnen und die kumulative zurückgelegte Strecke aufzeichnen
5. Bestimmen Sie die Bewegungsrichtung, indem Sie die Bewegungsstrecke in x-Richtung vergleichen und beurteilen, ob der Benutzer zum nächsten Bild wechseln soll basierend auf der Zeit nach links oder rechts gewischt


6. Das Verschieben von Bildern kann mit translator3d realisiert werden, indem die Hardwarebeschleunigung aktiviert wird


7. Für das Verschieben über eine bestimmte Distanz ist der EaseOut-Effekt erforderlich Wir können den EaseOut im Tween-Algorithmus verwenden, um die Entfernung zu erkennen, die wir jedes Mal zurücklegen. Natürlich können wir auch js verwenden Übergangsanimation festlegen


Implementierungsquellcode (nur als Referenz) :


Kopfstil

HTML-Struktur 


<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5"> 
 <title>移动端轮播图</title> 
 <style> 
 * { 
 box-sizing: border-box; 
 margin: 0; 
 padding: 0 
 } 
 .banner { 
 overflow: hidden; 
 width: 100%; 
 height: 300px 
 } 
 .banner .img-wrap { 
 position: relative; 
 height: 100% 
 } 
 .banner img { 
 display: block; 
 position: absolute; 
 top: 0; 
 width: 100%; 
 height: 100% 
 } 
 </style> 
</head>

JS-Code 1. EasyOut animierte Bewegung,

Hier ist HTMLElement.prototype.tweenTranslateXAnimate das TweenTranslateXAnimate Methode für alle HTML-Elementklassen erweitert


Wir müssen sie verwenden, um eine bestimmte Distanz zurückzulegen. Der Timer hilft uns, diesen sich wiederholenden Vorgang abzuschließen
<p class="banner"> 
 <p class="img-wrap" id="imgWrap"> 
 <img src="images/banner_3.jpg" data-index="-1"> 
 <img src="images/banner_1.jpg" data-index="0"> 
 <img src="images/banner_2.jpg" data-index="1"> 
 <img src="images/banner_3.jpg" data-index="2"> 
 <img src="images/banner_1.jpg" data-index="3"> 
 </p> 
</p>



Berührungsereignisteil


<script> 
 HTMLElement.prototype.tweenTranslateXAnimate = function (start, end, callback) { 
 var duration = 50; 
 var t = 0; 
 var vv = end - start; 
 var Tween = { 
 Quad: { 
 easeOut: function (t, b, c, d) { 
  return -c * (t /= d) * (t - 2) + b; 
 } 
 } 
 }; 
 
 this.timer = setInterval(function () { 
 var dis = start + Tween.Quad.easeOut(++t, 0, vv, duration); 
 this.style.transform = &#39;translate3d(&#39; + dis + &#39;px, 0, 0)&#39;; 
 if (vv > 0 && parseInt(this.style.transform.slice(12)) >= end) { 
 this.style.transform = &#39;translate3d(&#39; + parseInt(dis) + &#39;px, 0, 0)&#39;; 
 clearInterval(this.timer); 
 callback && callback(); 
 } 
 if (vv < 0 && parseInt(this.style.transform.slice(12)) <= end) { 
 this.style.transform = &#39;translate3d(&#39; + parseInt(dis) + &#39;px, 0, 0)&#39;; 
 clearInterval(this.timer); 
 callback && callback(); 
 } 
 }.bind(this), 4); 
 } 
</script>

Der kritischste Parameter im Berührungsereignis ist der pageX-Parameter, der aufzeichnet Die Position von Für uns zur Verwendung in realen Projekten.

Diese Demo bietet nur eine Idee zur Lösung des Problems. Ich glaube, dass mit dieser Idee auch verschiedene komplexe Anforderungen gelöst werden können...

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man natives JS verwendet, um einen mobilen Web-Karusselleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung von js+transition zur Realisierung von Animationen und zur Realisierung mobiler Web-KarusselldiagrammeNächster Artikel：Detaillierte Erläuterung von js+transition zur Realisierung von Animationen und zur Realisierung mobiler Web-Karusselldiagramme

In Verbindung stehende Artikel

Mehr sehen