本文主要内容
1. 效果展示
2. 实现的原理分析
3. 案例实现
1. 效果展示
如上效果，当用户将鼠标移入到每一张图片上，当前的图片会有一个翻转消失的效果，同时有一个图片描述信息的面板会翻转出现。而当鼠标移出图片时，原有的图片会翻转出现，面板信息会翻转消失。针对这样一个简单的效果描述，大家有没有自己的实现方法？
2. 实现的原理分析
2.1 结构与样式分析
由于需要的功能是随着鼠标移入图片与信息都需要翻转，所以在同一个位置要存在两个标签并发生相应的变化，可以考虑使用定位来实现。
在本文中，采用的是图片img与信息em都参照外层a标签的定位方式，然后再进行相应的样式变化。
2.2 基本功能逻辑
首先使用JS实现动态添加翻转后展示的信息面板；
然后借助jQuery的hover方法，实现鼠标移入移出的功能；
最后针对不同的翻转变化，让图片与信息面板发生相反的效果展示。
3. 案例实现
3.1 添加面板信息
在鼠标移入相应的图片时，需要让图片可以翻转消失，同时有一个信息面板可以翻转出现。
但是在结构的书写中并没有提供面板信息的标签，所以就需要使用JS动态的添加了一个em标签，借助append方法把相应的标签添加到了对应的img标签的后面。如下图所示：
除了添加标签以外，还把当前图片的alt属性中替代性文本填充成了标签的内容，其范例代码：
// 对每个a标签内部动态添加一个em标签，并使其内容为img的alt属性内容
label.find('.brand a').each(function() {
$(this).append('' + $(this).find('img').attr('alt') + '');
});
3.2 实现图片的翻转
实现图片的翻转是借助了jQuery中的hover方法，此方法携带了两个函数，写法如下：
label.find('.brand a').hover(function() {}, function() {});
其中第一个函数表示的是鼠标移入发生的事情；第二个函数表示的是鼠标移出发生的事情。
图片的翻转主要就是在第一个函数中进行书写，通过对外层的a标签绑定hover事件，然后变化其内部img的高度值与定位值，同时使用动画方式show()使得img后面的em标签出现。
代码范例如下：
// 鼠标移入img标签动画变小
$(this).find('img').stop().animate({
'height': 0,
'top': '35px'
}, 200, function() {
// em标签出现
$(this).hide().next().show();
// em标签动画变大
$(this).next().animate({
'height': '70px',
'top': 0
}, 200);
});
3.3 实现信息面板的翻转
实现信息面板的翻转出现主要是hover事件中第二个函数的功能，该函数主要处理的是让鼠标在移出时，em标签变小，原来的img标签要恢复到原本的初始状态。
相应代码如下：
// 鼠标移出em标签动画变小
$(this).find('em').animate({
'height': 0,
'top': '35px'
}, 200, function() {
// img标签出现
$(this).hide().prev().show();
// img动画变大
$(this).prev().animate({
'height': '70px',
'top': '0'
}, 200);
});
3.4 成品代码
jquery hover鼠标悬停图片旋转动画展示
.allbrand .brand {
overflow: hidden;
width: 390px;
height: 225px;
margin: 40px auto 0;
}
.allbrand .brand a {
position: relative;
float: left;
width: 120px;
height: 70px;
margin: 0 6px 5px 0;
color: #fff;
font-size: 14px;
line-height: 70px;
text-align: center;
}
.allbrand .brand a img {
position: absolute;
left: 10px;
width: 118px;
height: 68px;
border: 1px solid #e9e8e8;
}
.allbrand .brand a em {
overflow: hidden;
display: none;
position: absolute;
top: 36px;
left: 10px;
width: 118px;
height: 0;
border: 1px solid #e9e8e8;
background: #999;
opacity: 0.5;
cursor: pointer;
}
//翻转
function brandAnimate(label) {
if(label.find('.brand em').length != 0) {
return false;
}
// 对每个a标签内部动态添加一个em标签，并使其内容为img的alt属性内容
label.find('.brand a').each(function() {
$(this).append('' + $(this).find('img').attr('alt') + '');
});
label.find('.brand a').hover(function() {
// 鼠标移入img标签动画变小
$(this).find('img').stop().animate({
'height': 0,
'top': '35px'
}, 200, function() {
// em标签出现
$(this).hide().next().show();
// em标签动画变大
$(this).next().animate({
'height': '70px',
'top': 0
}, 200);
});
}, function() {
// 鼠标移出em标签动画变小
$(this).find('em').animate({
'height': 0,
'top': '35px'
}, 200, function() {
// img标签出现
$(this).hide().prev().show();
// img动画变大
$(this).prev().animate({
'height': '70px',
'top': '0'
}, 200);
});
});
}
brandAnimate($('.allbrand'));
原文地址：http://www.h5course.com
