js und CSS3, um einen Kartenrotationswechseleffekt zu erzielen

In diesem Artikel wird hauptsächlich js CSS3 vorgestellt, um den Kartenrotationseffekt im Detail zu erzielen. Interessierte Freunde können sich darauf beziehen.

Einige Karten haben den Effekt Der Wechsel nach links und rechts ist der auffälligste. Wischen Sie nach links oder rechts, um zu einem anderen zu wechseln. Heute werden wir CSS3 verwenden, um diesen Effekt zu erzielen.

Schauen wir uns zunächst eine Demo an. Sie können den spezifischen Stil selbst anpassen:

(Sie können auf die Schaltfläche klicken, um einzuschalten (PC und auf Mobilgeräten: Zum Umschalten nach links und rechts wischen)

Aus dem Effekt können wir erkennen, dass diese 5 PS nach links und rechts umgeschaltet werden können, und jedes Mal, wenn es einen Schalter gibt, wird es auch immer einen geben eines davon ist gut sichtbar in der Mitte angebracht. Beim Wechsel scheint es, dass p verschoben wurde und DOM-Hinzufügungen und -Löschungen durchgeführt wurden. Wenn Sie jedoch die Elemente untersuchen, können Sie feststellen, dass das DOM-Element seine Position nicht geändert hat. Es befindet sich immer noch an dieser Position. Wir haben lediglich die Klasse für jedes Element geändert, sodass sich die Position auf der Seite geändert zu haben scheint.

Tatsächlich ist das Prinzip folgendes: Ohne das DOM hinzuzufügen oder zu löschen, schreiben Sie einen bestimmten Stil für jedes p in der Position, führen Sie eine absolute Positionierung für jedes p durch und drehen Sie dann die Stile. Jeder Schalter hat einen Übergangsprozess von 0,6 Sekunden:

-webkit-transition: all 0.6s;
transition: all 0.6s;

Zum Beispiel sind die Klassen von links nach rechts: item_0, item_1, item_cur, item_3 , item_4, jede Klasse ist die Position des aktuellen p. Beim Schieben nach links wechselt das p rechts in die Mitte, sodass die Klasse von links nach rechts zu item_1, item_cur, item_3, item_4, item_0 wird.

var egg_change = function(type){
 var $demo = $('.demo'),
  index = parseInt( $demo.attr('index_cur')||2 ),
  $item = $('.demo .item'),
  len = $item.length;

 if( type=='left' ){
  index = (index+1)%len;
 }else{
  index = (index-1+len)%len;
 }
 $demo.attr('index_cur', index);

 $item.removeClass('item_0 item_1 item_3 item_4 item_cur');
 
 $item.eq( (index-2+len)%len ).addClass('item_0');
 $item.eq( (index-1+len)%len ).addClass('item_1');
 $item.eq(index).addClass('item_cur');
 $item.eq( (index+1)%len ).addClass('item_3');
 $item.eq( (index+2)%len ).addClass('item_4');
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Wie JavaScript bestimmt, ob der Browser CSS3-Attribute unterstützt

js und css3, um einen Rotationseffekt zu erzielen

JQuery- und CSS3-Klappkarten-Dropdown-Listenfeld, um den Effekt zu erzielen

Das obige ist der detaillierte Inhalt vonjs und CSS3, um einen Kartenrotationswechseleffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!