因客户需要图片展示翻牌效果，本人对Flash又是不熟悉，特用Jquery开发这一效果，自认为还不错，满足客户需求，代码也非常简单，网站空间，希望对需要的朋友有所帮助，美国空间，现在把具体Jquery代码展示如下：
一、html代码
<div> <div><a href=”” target=”_blank”><img src=”pic/1.gif”/></a></div> <div><a href=”” target=”_blank”><img src=”pic/2.gif”/></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 linkarray = new Array(“”,””);//翻转展示图片连接地址function fanzhan(){$().each(function(d){).animate({ width: ,left: }, 300,function(){})//实现翻转动画 从有到无 ).attr();//存放原来图片路径 ).attr();//存放原来图片链接地址 $().attr(, imgarray[d])//设置新图片路径 $().attr(, );//设置新图片宽度 $().attr(, linkarray[d])//设置新图片连接地址 imgarray[d]=oldimg;linkarray[d]=oldlink;$().animate({ width: ,left: }, 300); //翻转动画 从无到有})}$().hover(//实现鼠标悬停效果 鼠标放到图片上后 图片逐渐变大 移除后图片还原 function(){$().animate({ width: ,left: ,height: ,top: }, 100);}, function(){$().animate({ width: ,left: ,height: ,top: }, 100);}),5000) //定时执行翻牌效果 $().hover(function () {clearInterval(anima);},function () {anima=setInterval(,5000)}); //鼠标放到图片上停止翻转效果 移除图片翻转效果继续</script>
Javascript代码中我添加了详细的注释，就不再赘述，代码很少也很简单
四、总结
该js代码必须引入jquery库，还必须与css配合使用才能达到翻牌效果。我整理了一下源代码，希望用到的朋友可以下载使用。
下载源文件
，香港虚拟主机出门走好路，出口说好话，出手做好事。
