我们经常在游戏中看到几张牌的左右切换效果。中间那张牌最突出，向左或向右滑动可以切换到另一张牌。今天我们就用CSS3来达到这个效果。

我们先来看一个演示。您可以自己调整具体的样式：

(可以点击PC下的按钮切换，移动终端可以左右滑动切换)

从效果上我们可以看到，这五个div可以从左到右切换，切换的时候中间总会有一个突出的位置。切换时，似乎div已经移动，DOM已经添加或删除。但是如果我们检查元素，我们可以看到DOM元素没有改变它的位置，但是它仍然在那个位置。我们只是在每个元素上切换了类，所以页面上的位置似乎已经改变了。

其实原理是这样的：不添加、不删除DOM，在每个位置为每个div写一个特定的样式，绝对定位每个div，然后轮换播放样式。每次移交都有一个0.6s的过渡过程：

-web kit-transit :全0.6stransition:全0.6s例如，从左到右的类是：item _ 0、item _ 1、item _ cur、item _ 3和item _ 4。每个类都是当前div的位置。当滑动到左边时，右边的div将切换到中间，因此类将从左到右变成item _ 1、item _ cur、item _ 3、item _ 4和item _ 1

var egg _ change=function(type){ var $ demo=$('。demo ')，index=parsent($ demo . attr(' index _ cur ')| | 2)，$item=$('。演示。item ')，len=$ item.lengthif(type==' left '){ index=(index 1)% len；} else { index=(index-1 len)% len；} $demo.attr('index_cur '，index)；$ item . remove CLaSS(' 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(索引)。add CLaSS(' item _ cur ')；$item.eq((索引1)%len)。addCLaSS(' item _ 3 ')；$item.eq((索引2)%len)。addCLaSS(' item _ 4 ')；}以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。