So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)-CSS-Tutorial-php.cn

So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)

青灯夜游

Freigeben： 2018-11-07 17:25:40

Original

4116 Leute haben es durchsucht

Der Inhalt dieses Artikels besteht darin, anhand von Codebeispielen die Verwendung von CSS + JS zum Drehen von Bildern vorzustellen und ein manuell betriebenes „unendliches“ Fotokarussell zu erstellen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Jetzt beginnen wir mit der Einführung, wie man den Effekt erzielt.

1. Erstellen Sie das Bildkarussell-Framework

Das erste ist HTML. Es ist etwas schwer zu lesen, da wir alle Leerzeichen und Wagenrückläufe zwischen den Elementen entfernt haben. Auf diese Weise können wir mithilfe von JavaScript einfacher auf verschiedene Bilder verweisen – Leerzeichen oder Linien erstellen in einigen Browsern neue Knoten.

<div id="stage">
<div id="rotator"><a href="snow1.jpg"><img  src="snow1.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow2.jpg"><img  src="snow2.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow3.jpg"><img  src="snow3.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow4.jpg"><img  src="snow4.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow5.jpg"><img  src="snow5.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow6.jpg"><img  src="snow6.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow7.jpg"><img  src="snow7.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a><a href="snow8.jpg"><img  src="snow8.jpg"    style="max-width:90%" alt="So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)" ></a></div>
</div>

<p id="controls"><a href="#" onclick="rollLeft(document.getElementById(&#39;rotator&#39;)); return false;">←</a>
 <a href="#" onclick="rollRight(document.getElementById(&#39;rotator&#39;)); return false;">→</a></p>

Nach dem Login kopieren

Wie Sie sehen, gibt es da nicht viel zu erklären. Die Galerie ist in einem DIV enthalten und enthält die aufgelisteten Fotos/Links sowie einige Navigationslinks mit Onclick-Ereignissen.

2. Fotos im 3D-Raum anordnen

Die Form ist komplexer. Was wir hier tun, ist, die ersten fünf Fotos in eine konkave Form zu bringen und alle weiteren Fotos (vorerst) auszublenden. Externe Fotos werden um 60 Grad und benachbarte Fotos um 30 Grad gedreht. Das mittlere Foto wird von der Seite abgehoben.

#stage {
    margin: 1em auto;
    height: 120px;
  }
  #rotator {
    position: absolute;
    white-space: nowrap;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
  }
  #rotator a img {
    position: relative;
    padding: 10px;
    border: 1px solid #ccc;
    vertical-align: middle;
  }
  #rotator a:nth-child(1) img {
    -webkit-transform-origin: 100% 50% 0;
    -webkit-transform: rotateY(-60deg);
    -moz-transform-origin: 100% 50% 0;
    -moz-transform: rotateY(-60deg);
  }
  #rotator a:nth-child(2) img {
    -webkit-transform-origin: 0 50% 0;
    -webkit-transform: rotateY(-30deg);
    -moz-transform-origin: 0 50% 0;
    -moz-transform: rotateY(-30deg);
  }
  #rotator a:nth-child(3) img {
    -webkit-transform: translateZ(220px);
    -moz-transform: translateZ(220px);
  }
  #rotator a:nth-child(4) img {
    -webkit-transform-origin: 100% 50% 0;
    -webkit-transform: rotateY(30deg);
    -moz-transform-origin: 100% 50% 0;
    -moz-transform: rotateY(30deg);
  }
  #rotator a:nth-child(5) img {
    -webkit-transform-origin: 0 50% 0;
    -webkit-transform: rotateY(60deg);
    -moz-transform-origin: 0 50% 0;
    -moz-transform: rotateY(60deg);
  }
  #rotator a:nth-child(n+6) {
    display: none;
  }

Nach dem Login kopieren

Um auf ein einzelnes Foto/einen Link zu verweisen, verwenden wir die n-te-Kind-Pseudoklasse (falls es nicht klar ist, im vorherigen Artikel [Detaillierte Erklärung der CSS-Pseudoklasse n-te- child() example] (Hier vorgestellt). In diesem Fall ist Link (A) ein untergeordnetes Element des übergeordneten DIV. Ohne Links sind die untergeordneten Elemente IMG-Elemente.

3. Fotos drehen

Das kleine JavaScript (onclick), das Sie zuvor gesehen haben, ruft die folgende Funktion auf. Sie nehmen lediglich ein Element von einem Ende des Fotoarrays im DOM und verschieben es an das andere Ende:

<script type="text/javascript">
  function rollRight(el)
  {
    el.insertBefore(el.lastChild, el.firstChild);
  }
  function rollLeft(el)
  {
    el.appendChild(el.firstChild);
  }
</script>

Nach dem Login kopieren

Der JavaScript-Code sollte (fast immer) am Ende der Seite platziert werden.

Die erste Funktion nimmt den Knoten mit dem letzten Foto/Link (sichtbar oder ausgeblendet) und platziert ihn vor dem ersten Foto/Link. Die zweite Funktion nimmt das erste Foto/den ersten Link und verschiebt es an das Ende der Zeile. Die Verwendung von onclick ist nicht der eleganteste Ansatz, reicht aber vorerst aus.

Wenn sich Knoten bewegen, nehmen sie den Stil an, der der neuen Position (1,2,3,4,5 oder 6+) zugewiesen ist. Wir müssen also nur ihre Position ändern, ohne uns Gedanken über Bewegung oder Drehung machen zu müssen.

4. Effektanzeige

Hier sehen Sie ein Beispiel für ein rotierendes Fotokarussell:

So erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel)

Sie Fertig, Sie können es selbst ausprobieren!

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen Bildrotationsanzeigeeffekt (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!