jquery的图片展示--卡牌翻转效果的代码示例

卡牌翻转效果是一种很好玩的效果，是我用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代码很重要，必须的请注意，相对位置控制。

三、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配合使用才能达到翻牌效果。