JS and CSS3 achieve card rotation switching effect

This article is mainly for everyone to introduce the JS CSS3 realize card rotation switching effect, with a certain reference value, interested in small partners can refer to

We often see in the game a few cards around the effect of switching, one of the most prominent in the middle, swipe left or right to switch to another one, today we use CSS3 to achieve this effect.

Let's take a look at the demo, the specific style you can adjust yourself:

(PC can click the button to switch, the mobile can be left and right sliding switch)

From the effect we can see, these 5 p can be left and right switch, each time there will always be a prominent position in the middle of the display. When switching, it appears that P has moved, and the DOM has been deleted. But if we examine the element, we can see that the DOM element is not transformed, it is still in that position, we just switch the class on each element, and the position on the page appears to have changed.

In fact, the principle is this: do not do the DOM additions and deletions, for each position p is written on a specific style, each p is absolutely positioned, and then the style of the carousel. Each switchover has a 0.6s transition process:

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

For example, from left to right class is: Item_0, Item_1, Item_cur, Item_3, Item_4, each class is the current position of P, swipe left, the right p will switch to the middle, so that class from left to right into the item_1, Item_cur, Item_3, Item_4, Item_0.

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 ');}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!