简介：jquery鼠标悬浮图片翻牌旋转，基于jquery配合动画插件animate实现图片翻牌旋转特效，当鼠标悬浮到图片上的时候，前面图片与背面文字间进行翻转切换。
完整代码如下(图片和JQ文件另行下载放置)
<!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=utf-8″ />
<title>Jquery(JS)实现鼠标悬停图片(水平/垂直)翻转(鼠标放上去翻牌)效果</title>
</head>
<body>
<style type=”text/css”>
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial;}
.brand a{
display: block;
float: left;
margin: 20px;
width: 180px;
height: 240px;
text-align: center;
position: relative;
}
.brand img{
width: 180px;
height: 240px;
}
.brand .info{
display: none;
background-color: #f0f0f0;
color: #369242;
}
.vertical .info{
width: 0;
height: 240px;
margin: 0 auto;
}
.horizontal img{
position: absolute;
top: 0;
left: 0;
}
.horizontal .info{
width: 180px;
height: 0;
top: 120px;
position: absolute;
left: 0;
}
</style><div style=”width:720px;margin:0 auto;”>
<div id=”vertical”>
<a target=”_blank” href=”#”><img alt=”” src=”images/1.jpg” /><div>图像文字说明1</div></a>
<a target=”_blank” href=”#”><img lta=”” src=”images/2.jpg” /><div>图像文字说明2</div></a>
<a target=”_blank” href=”#”><img alt=”” src=”images/3.jpg” /><div>图像文字说明3</div></a>
</div><div style=”clear:both;”></div>
<div id=”horizontal”>
<a target=”_blank” href=”#”><img alt=”” src=”images/1.jpg” /><div>图像文字说明4</div></a>
<a target=”_blank” href=”#”><img alt=”” src=”images/2.jpg” /><div>图像文字说明5</div></a>
<a target=”_blank” href=”#”><img alt=”” src=”images/3.jpg” /><div>图像文字说明6</div></a>
</div></div>
<script type=”text/javascript” src=”js/jquery-1.9.1.min.js”></script>
<script type=”text/javascript”>
//卡牌翻转效果
var turn = function(target,time,opts){
target.find(‘a’).hover(function(){
$(this).find(‘img’).stop().animate(opts[0],time,function(){
$(this).hide().next().show();
$(this).next().animate(opts[1],time);
});
},function(){
$(this).find(‘.info’).animate(opts[0],time,function(){
$(this).hide().prev().show();
$(this).prev().animate(opts[1],time);
});
});
}
//水平翻转
var verticalOpts = [{‘width’:0},{‘width’:’180px’}];
turn($(‘#vertical’),100,verticalOpts);
//垂直翻转
var horizontalOpts = [{‘height’:0,’top’:’120px’},{‘height’:’240px’,’top’:0}];
turn($(‘#horizontal’),100,horizontalOpts);
</script>
</body>
</html>
在线演示：http://www.datouwang.com/uploads/demo/jiaoben/201402/jiaoben182/
评论