jquery图片滑动翻牌效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery图片滑动翻牌效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery图片滑动翻牌效果</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div style="width:600px; height:200px; margin:50px auto;">
<!--代码开始-->
<ul class="box">
	<li>
		<a href="#" target="_blank">
			<div class="toll_img"><img src="images/pic01.jpg" /></div>
			<div class="toll_info"><p>专享应用宝首发推荐位，轻松提升新版数据。</p></div>
		</a>
	</li>
	<li>
		<a href="#" target="_blank">
			<div class="toll_img"><img src="images/pic02.jpg" /></div>
			<div class="toll_info"><p>大平台大做为，应用宝提供活动平台，只要应用足够优质，即可享有应用宝众多推广位，轻松触达海量用户。</p></div>
		</a>
	</li>
	<li>
		<a href="#" target="_blank">
			<div class="toll_img"><img src="images/pic03.jpg" /></div>
			<div class="toll_info"><p>为开发者提供整套的推广和盈利方案，提供更有竞争力的收入，创造更精彩的未来！</p></div>
		</a>
	</li>
</ul>
<!--代码结束-->
</div>
</body>
</html>

JS代码(js.js):

$(document).ready(function(){
	$('.box a').mouseover(function(){
	$(this).stop().animate({
	"top":"-114px"}
,200);
}
)$('.box a').mouseout(function(){
	$(this).stop().animate({
	"top":"0"}
,200);
}
)}
)

CSS代码(zzsc.css):

/* ת���뱣���Ȩ��Ϣ������ͼ�� www.lanrentuku.com */
*{padding:0px;margin:0px;}
img{border:none;}
ul,li{list-style:none;}
.box li{width:190px;height:114px;margin-right:10px;float:left;overflow:hidden;position:relative;}
.toll_img{width:190px;height:114px;}
.toll_info{height:114px;background:#EEE;vertical-align:middle;display:table-cell;}
.box li p{padding:10px;font:normal 13px/24px '΢���ź�';cursor:pointer;}
.box li a{color:#666;text-decoration:none;position:absolute;top:0;left:0;}

附件:下载该文件资源,减少时间成本(增值服务)