卡牌翻轉效果是一種很好玩的效果，是我用Jquery實現的一種效果，跟Flash實現的效果幾乎一模一樣。代碼也非常簡單，希望對需要的朋友有所幫助，現在把具體開發過程描述如下：
一、編寫HTML代碼
<!--卡牌翻轉效果容器-->
<div id="picshowfz">
<!--第一張翻轉圖片-->
<div>
<a href="" target="_blank"><img src="pic/1.gif" width="118" height="181" border="0"/></a>
</div>
<!--第二張翻轉圖片-->
<div>
<a href="" target="_blank"><img src="pic/2.gif" width="118" height="181" border="0"/></a>
</div>
</div>
二、 編寫CSS代碼
body{font-family:Verdana, Geneva, sans-serif; font-size:12px;}
#picshowfz { margin:90px;}
#picshowfz div{float:left; width:118px; margin-left:10px; margin-right:10px; border:0px;}
#picshowfz img{position:relative;}----這段css代碼很重要，必須的請注意，相對位置控制，在通用無限極下拉菜單中我詳細介紹過position中absolute 與 relative的區別
三、js代碼
<script>
var imgarray = new Array("pic/3.gif","pic/4.gif");
//翻轉展示圖片路徑
var linkarray = new Array("","");
//翻轉展示圖片連接地址
function fanzhan()
{
$("#picshowfz div").each(function(d){
//查找所有展示圖片並翻轉新圖片
$(this).find("img").animate({ width: "0px",left: "59px"}, 300,function(){})
//實現翻轉動畫 從有到無
var oldimg = $(this).find("img").attr("src");
//存放原來圖片路徑
var oldlink = $(this).find("img").attr("href");
//存放原來圖片鏈接地址
$(this).find("img").attr("src", imgarray[d])
//設置新圖片路徑
$(this).find("img").attr("width", "0");
//設置新圖片寬度
$(this).find("img").attr("href", linkarray[d])
//設置新圖片連接地址
imgarray[d]=oldimg;
linkarray[d]=oldlink;
$(this).find("img").animate({ width: "118px",left: "0px"}, 300);
//翻轉動畫 從無到有
})
}
$("#picshowfz div").hover(
//實現鼠標懸停效果 鼠標放到圖片上后 圖片逐漸變大 移除后圖片還原
function(){
$(this).find("img").animate({ width: "138px",left: "-10px",height: "201px",top: "-10px"}, 100);
}, function(){
$(this).find("img").animate({ width: "118px",left: "0px",height: "181px",top: "0px"}, 100);
})
var anima=setInterval('fanzhan()',5000)
//定時執行翻牌效果
$("#picshowfz").hover(
function () {
clearInterval(anima);
},
function () {
anima=setInterval('fanzhan()',5000)
}
);
//鼠標放到圖片上停止翻轉效果 移除圖片翻轉效果繼續
</script>
四、總結
該js代碼必須引入jquery庫，還必須與css配合使用才能達到翻牌效果。歡迎下載