前端特效開發 | 圖片翻轉的製作
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試試。