jQuery jCoverflip是一個開源的jQuery插件，可以讓你輕松地添加一個漂亮的圖片翻轉(zhuǎn)效果到你的網(wǎng)站上。它使用CSS3 以及 HTML5來創(chuàng)建翻轉(zhuǎn)效果，并且支持多種配置選項，包括影響翻轉(zhuǎn)角度、動畫速度、初始位置等等。

//初始化jCoverflip
$('#myCoverflip').jcoverflip({
current: 2,  //當前選中的卡片
selector: 'div',
enableKeyboard: true,  //是否開啟鍵盤導航
size: 'small',  //卡片大?。╯mall, medium, large）
duration: 400,  //動畫時間
beforeCss: function(offset) {  //在翻轉(zhuǎn)前應用的CSS
return {
'zIndex': 100 - Math.abs(offset)
};
},
afterCss: function(offset) {  //在翻轉(zhuǎn)后應用的CSS
return {
'top': '0px',
'zIndex': 100 - Math.abs(offset)
};
}
});

除了基本的配置選項，jCoverflip還支持自定義動畫效果，以及事件的回調(diào)函數(shù)。比如，你可以自定義每個卡片翻轉(zhuǎn)時的動畫效果：

//自定義翻轉(zhuǎn)效果
$('#myCoverflip').jcoverflip({
//...
flip: function(event, ui) {
var elem = $(this),
card = elem.data('cover'),
dir = ui.direction >0 ? 'right' : 'left';
switch(dir) {
case 'right':
card.css({ '-webkit-transform': 'rotate(-150deg)', 'left': '-240px' });
break;
case 'left':
card.css({ '-webkit-transform': 'rotate(150deg)', 'left': '240px' });
break;
}
setTimeout(function() {
elem.jcoverflip('unflip', ui.index);
}, 1000);
}
});

jCoverflip可以更好地展示你的圖片，使它們更生動、有趣?？靵韲L試吧！