前端特效开发 | 图片翻转的制作
HTML5学堂（码匠）：在前端开发中，针对效果层面的开发，使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果，我们能否考虑借助某些简单方便的操作来替代原生JS的使用呢？
本文主要内容
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('<em>' + $(this).find('img').attr('alt') + '</em>');
});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 成品代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery hover鼠标悬停图片旋转动画展示</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="allbrand">
<div class="brand">
<a href=""><img alt="兔子" src="http://img.h5course.cn/codepen/2017.01.05.01.jpg" /></a>
<a href=""><img alt="鹦鹉" src="http://img.h5course.cn/codepen/2017.01.05.02.jpg" /></a>
<a href=""><img alt="萌熊" src="http://img.h5course.cn/codepen/2017.01.05.03.jpg" /></a>
<a href=""><img alt="蝴蝶" src="http://img.h5course.cn/codepen/2017.01.05.04.jpg" /></a>
<a href=""><img alt="HTML5学堂(码匠)" src="http://img.h5course.cn/codepen/2017.01.05.05.jpg" /></a>
<a href=""><img alt="狗狗" src="http://img.h5course.cn/codepen/2017.01.05.06.jpg" /></a>
<a href=""><img alt="树蛙" src="http://img.h5course.cn/codepen/2017.01.05.07.jpg" /></a>
<a href=""><img alt="蜂鸟" src="http://img.h5course.cn/codepen/2017.01.05.08.jpg" /></a>
<a href=""><img alt="灰鸭子" src="http://img.h5course.cn/codepen/2017.01.05.09.jpg" /></a>
</div>
</div>
<script type="text/javascript">
//翻转
function brandAnimate(label) {
if(label.find('.brand em').length != 0) {
return false;
}
// 对每个a标签内部动态添加一个em标签，并使其内容为img的alt属性内容
label.find('.brand a').each(function() {
$(this).append('<em>' + $(this).find('img').attr('alt') + '</em>');
});
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'));
</script>
</body>
</html>总结
图片翻转效果使用jQuery的hover方法即可简单的实现出来。当然除此之外，也还可以借助CSS3的一些方法来进行实现，大家在学习完此方法之后不妨也去使用CSS3试试。